美文网首页
vue滚动回到顶部事件

vue滚动回到顶部事件

作者: 有你才精彩XX | 来源:发表于2021-04-07 11:16 被阅读0次
    export default {
            name: "side",
            data(){
                return{
                    gotop: false,
                    timer:null
                }
            },
            mounted() {
                // 此处true需要加上,不加滚动事件可能绑定不成功
                window.addEventListener("scroll", this.handleScroll, true);
            },
            destroyed() {
                window.removeEventListener('scroll', this.handleScroll); //离开页面需要移除这个监听的事件
                clearInterval(this.timer);
            },
            methods: {
                handleScroll() {
                    let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
                    scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
                },
                toTop() {
                    let top = document.documentElement.scrollTop || document.body.scrollTop;
                    // 实现滚动效果
                    this.timer = setInterval(() => {
                        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                        if (top <= 0) {
                            clearInterval(this.timer);
                        }
                    }, 10);
                }
            }
        }

    相关文章

      网友评论

          本文标题:vue滚动回到顶部事件

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