返回顶部,动画效果

<!-- 返回顶部图标 -->
<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();
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    余生动听阅读 13,586评论 0 11
  • 彩排完,天已黑
    刘凯书法阅读 9,756评论 1 3
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 126,972评论 2 7