【Vue功能】回到顶部

Vue回到顶部的简单做法

😄 不断学习才是王道
🔥 继续踏上学习之路，学之分享笔记
👊 总有一天我也能像各位大佬一样
🏆 一个有梦有戏的人 @怒放吧德德

实际上就是将滚动条的值设置为0，右下角图标可以通过一个按钮来触发事件，通过样式将按钮固定住，通过document.documentElement.scrollTop获取到DOM结点，直接设置成0即可。在Vue中，如果 需要每次点开新的页面时候，都要从顶部开始，这样体验感也比较，就可以在app.vue中去设置scrollTop的值为0。

代码如下：

通过按钮点击事件来触发事件

<el-button v-show="showTop" class="top" @click="toTop">UP</el-button>

触发事件方法：

设置scrollTop为0 即可

methods: {
   toTop() {
      document.documentElement.scrollTop = 0;
   },
}

接着判断按钮的显示情况：

监听scrollTop大小，大于0就显示按钮

mounted() {
    window.addEventListener('scroll', () => {
         this.$nextTick(() => {
             var scrTop = document.documentElement.scrollTop;
             if (scrTop !== 0) {
                 this.showTop = true;
             } else {
                 this.showTop = false;
             }
         })
    }, true)
}