Vue实现顺滑返回顶部

Vue实现顺滑返回顶部,模仿动画(简单易懂)

思路:
1.在组件初始化时监听滚动事件
2.在关闭页面时移除监听事件
3.在方法中使用定时器来实现顺滑返回顶部,防止突兀

代码

this.tops  ---  用于控制返回顶部按钮是否显示
this.heights  ---  浏览器视图窗口的高度
this.scrolltop  ---  全局变量
gotop ---  返回顶部的事件
scrollToTop  ---  监听事件
<button @click="gotop" v-if="tops">返回顶部</button>
mounted(){
	window.addEventListener('scroll', this.scrollToTop)
}
destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
 }
 methods:{
	scrollToTop () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            this.scrolltop = scrollTop
            if (parseInt(this.scrolltop) > (parseInt(this.heights) / 2)) {
                this.tops = true
            } else {
                this.tops = false
            }
        },
       gotop () {
            let timer = setInterval(() => {
                document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
                if (this.scrolltop === 0) {
                    clearInterval(timer)
                }
            }, 15)
        }, 
}
发布了1 篇原创文章 · 获赞 0 · 访问量 5
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览