回到顶部按钮逻辑

// template
//【v-tap 解决点击穿透问题 "v-tap": "^3.0.3",】
<div v-show="showBackToTop" v-tap="{methods:backToTop}" class="back-to-top">
 </div>


// script
mounted () {
        this.bannerHeight = document.getElementsByClassName('category-banner')[0].offsetHeight;
        window.addEventListener('scroll', this.handleScroll)
    },


 handleScroll () {
            let scrollTop = this.getScrollTop();
            let clientHeight = this.getClientHeight();
            // 上滑标签导航吸顶
            this.ifAttachedTop = scrollTop >= this.bannerHeight;

            //回到顶部start: 如果滚动高度大于可视区域高度，则显示回到顶部按钮
            this.showBackToTop = scrollTop >= clientHeight;

            if (!this.isTop) {
                clearInterval(this.timer);
            }
            this.isTop = false;
            //回到顶部 over

              //   可以在这里处理滚动加载更多的逻辑
        },

backToTop () {
            //设置一个定时器
            this.timer = setInterval(() => {
                //获取滚动条的滚动高度
                let scrollTop = this.getScrollTop();

                //用于设置速度差，产生缓动的效果
                let speed = Math.floor(-scrollTop / 6);
                this.setScrollTop(scrollTop + speed);
                let scrollTop2 = this.getScrollTop();

                this.isTop = true;  //用于阻止滚动事件清除定时器
                if ((scrollTop >= this.bannerHeight) && (scrollTop2 <= this.bannerHeight)) {
                    clearInterval(this.timer);
                    this.setScrollTop(this.bannerHeight);

                }
            }, 30);
        }