前端vue3项目 当向下滑动的时候 如何实现点击按钮回到顶部的功能

在Vue3项目中，如果你想要实现在页面滑到底部时通过点击按钮返回到页面顶部，你可以利用JavaScript事件监听和滚动事件（如`window.onscroll`或`scroll`事件）。以下是一个基本的示例：

首先，在HTML中添加一个用于触发回顶操作的按钮：

<button @click="goToTop">回到顶部</button>

然后，在你的Vue组件的script部分中定义`goToTop`方法：

export default {
  methods: {
    goToTop() {
      const el = document.documentElement;
      if (el.scrollTop > 0 || window.pageYOffset > 0) { // 滑动到底部判断条件
        window.scrollTo({
          top: 0, // 将滚动条移动到顶部
          behavior: 'smooth', // 可选，设置平滑滚动效果
        });
      }
    },
  },
};

在这个例子中，当用户点击“回到顶部”按钮时，会检查滚动位置是否大于0，如果大于0则滚动到页面顶部。`behavior: 'smooth'`可以提供一个平滑的滚动体验。