手把手教你——Vue怎么弄一个完美的置顶按钮（监测scroll到一定位置出现，点击置顶有动画）

严严夏日

已于 2023-04-15 01:08:17 修改

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

于 2023-04-15 01:04:18 首次发布

本文链接：https://blog.csdn.net/qq_48621951/article/details/130164693

版权

一、按钮基本样式

html代码

<button class="top" @click="toTop" v-if="top"> 
        ^
        Top
      </button>

css代码

.top {
    position: fixed;
    width: 33px;
    height: 33px;
    bottom: 50px;
    right: 20px;
    text-align: center;
    font-size: 12px;
  }

二、script方法

script代码

      // 滚动监听
	mounted () {
    	window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
    }，
    methods：{
    // 获取页面滚动距离
    handleScroll () {
	        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
	        if (scrollTop > 200) {
            this.top = true;
        } else {
            this.top = false;
        }
	}，
	//回到顶部
	toTop() {
      let Top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 设置计时器，实现滚动效果
	    const timeTop = setInterval(() => {
	    document.body.scrollTop = document.documentElement.scrollTop = Top -= 50
	    if (Top <= 10) {
	     clearInterval(timeTop)
	    }
	    }, 20)
    }
    }