Vue回到顶部的简单做法

学习记录一下

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

<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)
}