vue回到顶部

最新推荐文章于 2024-04-29 16:38:54 发布

一个有梦有戏的人

最新推荐文章于 2024-04-29 16:38:54 发布

阅读量10w+

点赞数

分类专栏： Vue 文章标签： Vue 回到顶部滚动事件按钮 JavaScript

本文链接：https://blog.csdn.net/qq_43843951/article/details/124143880

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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