在网页开发中，经常会有需要回到页面顶部的需求。Vue.js 是一种流行的 JavaScript 框架，提供了一些方法，可以轻松地实现此功能。
方法 1：使用 window.scrollTo() 方法
使用 window.scrollTo() 方法可以将页面滚动到指定的位置。我们可以将该方法与一个按钮 click 事件绑定，从而实现回到页面顶部的功能。
示例代码：
-- -------------------- ---- -------
----------
-----
------- ----------------------------------
------
-----------
--------
------ ------- -
-------- -
------------- -
-----------------
---- --
--------- --------
--
-
-
-
---------在上面的示例代码中，我们在按钮上添加了点击事件 @click="scrollToTop"。在 scrollToTop() 方法中，我们使用 window.scrollTo() 方法，并将 top 属性设置为 0，表示将页面滚动到顶部位置。并且我们添加了 behavior 属性，并将其设置为 smooth，表示页面滚动时拥有平滑的滚动效果。因此，每次点击按钮，都可以使页面平滑地回到顶部。
方法 2：使用 Vue.js 插件 vue-scrollto
vue-scrollto 是一个方便的 Vue.js 插件，可以让我们通过简单的 API 轻松地滚动到页面的任何位置。
首先，需要安装该插件：
npm install --save vue-scrollto
然后，在项目中引入该插件，并在 Vue 实例中使用它：
import VueScrollTo from 'vue-scrollto' Vue.use(VueScrollTo)
接下来，我们就可以使用 VueScrollTo 的 scrollTo() 方法，滚动到页面顶部。
示例代码：
-- -------------------- ---- -------
----------
-----
------- ----------------------------------
------
-----------
--------
------ - -------- - ---- --------------
------ ------- -
-------- -
------------- -
---------------- ---- - ------- ---------------- --
-
-
-
---------在上面的示例代码中，我们在按钮上添加了点击事件 @click="scrollToTop"。在 scrollToTop() 方法中，我们使用 scrollTo() 方法并传递三个参数：
- 第一个参数是需要滚动到的元素的选择器。在示例中，我们将其设置为
#app，表示滚动到具有id="app"的元素，即页面顶部。 - 第二个参数是滚动时间。在示例中，我们将其设置为
500，表示滚动所需的时间。 - 第三个参数是可选的选项，可以设置
easing（缓和）选项，表示如何缓和滚动效果。
总结
使用 Vue.js 以及相关插件，我们可以轻松地实现回到页面顶部的功能。无论是使用 window.scrollTo() 方法，还是 Vue.js 插件 vue-scrollto，都可以在页面开发中提供方便的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dc45a968c7c53b0c64e6a