美文网首页
vue返回顶部

vue返回顶部

作者: Cherry丶小丸子 | 来源:发表于2020-02-18 13:47 被阅读0次
<div class="returnTop" v-show="btnFlag" @click="returnTop">返回顶部</div>
methods:{
    returnTop(){
        const that = this
        let timer = setInterval(() => {
            let ispeed = Math.floor(-that.scrollTop / 5)
            document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
            if (that.scrollTop === 0) {
                clearInterval(timer)
            }
        }, 16)
    },
    scrollToTop(){
        const that = this
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        that.scrollTop = scrollTop
        if(that.scrollTop > 60) {
            that.btnFlag = true
        }else{
            that.btnFlag = false
        }
    }
},
mounted() {
    window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
}

相关文章

网友评论

      本文标题:vue返回顶部

      本文链接:https://www.haomeiwen.com/subject/gwgzoctx.html