vue项目 vue-scrollto 插件实现回到顶部 浮动按钮 滚动一定距离后才显示

你可以使用vue-scrollto插件来实现回到顶部浮动按钮，并在滚动一定距离后才显示。具体实现步骤如下：

1. 安装vue-scrollto插件，可以使用npm或yarn进行安装。例如：

   npm install vue-scrollto --save

2. 在Vue组件中引入vue-scrollto插件，并注册到Vue实例中。例如：

   import Vue from 'vue'
   import VueScrollTo from 'vue-scrollto'
   
   Vue.use(VueScrollTo)

3. 在组件的template中，定义一个回到顶部的按钮，并绑定click事件。例如：

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

当scrollTop的值大于100时，显示回到顶部按钮。

4. 在组件的methods中，定义一个scrollToTop方法，用来实现回到顶部的功能。例如：

   methods: {
       scrollToTop() {
           VueScrollTo.scrollTo(0, 500)
       }
   }

当点击回到顶部按钮时，调用VueScrollTo.scrollTo方法，将页面滚动到顶部。

5. 在组件的mounted生命周期钩子函数中，监听页面的滚动事件，并更新scrollTop的值。例如：

   mounted() {
       window.addEventListener('scroll', () => {
           this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
       })
   }

通过以上步骤，就可以使用vue-scrollto插件实现回到顶部浮动按钮，并且滚动一定距离后才显示的效果。