美文网首页
返回顶部,动画效果

返回顶部,动画效果

作者: plum_meizi | 来源:发表于2021-04-13 11:01 被阅读0次
    <!-- 返回顶部图标 -->
    <div v-if="showUpTop" class="up-to-top" @click="backToTop"></div>
    

    最简单的返回顶部就是window.scrollTo(0,0),但是这没有动画效果,我需要页面慢慢滚动的动画
    1.添加监听

    window.onscroll = () => {
                const vscroll = document.documentElement.scrollTop || document.body.scrollTop;
                if (vscroll > 1) {
                    this.isScroll = true;
                } else {
                    this.isScroll = false;
                }
                // 所有页面,向下滑动超过950px时显示
                if (vscroll > 950) {
                    this.showUpTop = true;
                } else {
                    this.showUpTop = false;
                }
    };
    

    2.这里我们需要用到一个函数requestAnimationFrame

    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

    注意:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用window.requestAnimationFrame()

    // 返回頂部
    private backToTop() {
            const scrollToTop = () => {
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop > 0) {
                    window.requestAnimationFrame(scrollToTop);
                    window.scrollTo(0, scrollTop - scrollTop / 8);
                }
            };
            scrollToTop();
    }
    

    相关文章

      网友评论

          本文标题:返回顶部,动画效果

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