vue.js 做一个返回顶部的功能

Question

这是我用JQ之前写的返回顶部，见图：

现在需要改成vue来做。

我现在有点纠结，我看到别人的代码 是在vue的方法methods里面，用的原生JS 操作DOM来实现的，但是我认为无论是原生JS还是JQ来操作DOM ，都违背了vue框架的理念——数据驱动页面。
有人又说在HTML代码里面写vue的特殊属性ref来操作DOM。
问题是，我现在不知道那种事最佳方法，ref这种方法如何做。 请哪位大佬分享经验，特此感谢~

Answer 1

如果是手动操作滚动条、没法不用Dom操作、要把scrollTop变为0才行

但是如果你真的不想用Dom、
我们换个思路、给你一个奇技淫巧

在最顶部放一个没高度的锚点、然后点击后用a标签锚点定过去

Answer 2

数据驱动并不是所有场景都是最优解.
如果一定要用数据驱动页面高度,你可以用一个计算属性表示页面滑动高度,set里面每次设置一个值,就用scrollTo.
这样写起来就是数据驱动了.类似这种感觉

    this.scrollTop = '100'