vue项目实现回到顶部

要在Vue项目中实现回到顶部，可以使用以下几种方法：

1. 使用Vue插件vue-backtotop，该插件提供一个回到顶部的按钮，当用户滚动页面时，按钮会自动显示。

2. 在Vue组件中添加回到顶部的功能，可以在组件中添加一个按钮，然后在按钮的点击事件中使用JavaScript代码实现回到顶部的功能，例如：

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

methods: {
  backToTop() {
    window.scrollTo(0, 0);
  }
}

3. 使用CSS样式实现回到顶部的按钮，可以在CSS文件中添加如下样式：

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

.back-to-top:hover {
  background-color: #555;
}

.show {
  display: block;
}

然后在Vue组件中添加一个按钮，通过监听滚动事件，当滚动超过一定距离时，显示按钮：

<button class="back-to-top" @click="backToTop">回到顶部</button>

data() {
  return {
    showBackToTop: false
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    if (window.pageYOffset > 300) {
      this.showBackToTop = true;
    } else {
      this.showBackToTop = false;
    }
  },
  backToTop() {
    window.scrollTo(0, 0);
  }
}

在这个例子中，当页面滚动超过300像素时，显示回到顶部的按钮。