vue项目 实现回到顶部 要求按钮是浮动的 滚动一定距离后才显示

好的，关于你的问题，我可以给出一个具体的实现思路：

1. 首先，在 Vue 组件中，你可以通过监听 `window` 对象的 `scroll` 事件，来实时获取当前滚动条滚动的距离。

2. 然后，你可以通过判断这个滚动距离是否大于某个阈值，来决定是否显示“回到顶部”按钮。比如说，你可以定义一个变量 `showButton`，然后在 `scroll` 事件中更新它的值：

   data() {
     return {
       showButton: false
     }
   },
   mounted() {
     window.addEventListener('scroll', this.handleScroll)
   },
   destroyed() {
     window.removeEventListener('scroll', this.handleScroll)
   },
   methods: {
     handleScroll() {
       if (window.pageYOffset > 200) {
         this.showButton = true
       } else {
         this.showButton = false
       }
     }
   }

上面的代码中，我将阈值设为了 200，也就是说，只有当滚动距离大于 200 时，才会显示“回到顶部”按钮。

3. 接下来，你可以在模板中根据 `showButton` 变量的值，来控制“回到顶部”按钮的显示和隐藏：

   <template>
     <div>
       <button v-if="showButton" @click="scrollTop">回到顶部</button>
     </div>
   </template>

上面的代码中，我使用了 `v-if` 指令来根据 `showButton` 的值来控制按钮的显示和隐藏。同时，我还绑定了 `click` 事件，来实现点击按钮后回到页面顶部的功能。

4. 最后，你可以在 `methods` 中实现 `scrollTop` 方法，来实现回到顶部的功能：

   methods: {
     handleScroll() {
       // ...
     },
     scrollTop() {
       window.scrollTo({
         top: 0,
         behavior: 'smooth'
       })
     }
   }

上面的代码中，我使用了 `window.scrollTo` 方法来滚动到页面顶部。同时，我还设置了 `behavior: 'smooth'`，来实现平滑滚动的效果。

综上所述，以上就是一个简单的实现思路，你可以根据自己的实际需求进行调整。