回到页面顶部

最新推荐文章于 2024-09-08 16:45:30 发布

原创最新推荐文章于 2024-09-08 16:45:30 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

前端开发积累同时被 2 个专栏收录

23 篇文章

订阅专栏

css

8 篇文章

订阅专栏

博客介绍了点击向上箭头回到顶部的实现。涉及两个关键方法，window.requestAnimationFrame(callback)用于告诉浏览器执行动画并在下次重绘前调用指定函数更新；window.cancelAnimationFrame()可取消先前添加到计划中的动画帧请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：点击向上箭头回到顶部

在这里插入图片描述

实现方式：

// html结构
<div class="suspension"><!-- 在线咨询 -->
   <div class="consultation">
       <img src="assets/images/cut-icon_slices/cut_homepage_kefu.png" alt="">
       <p>在线咨询</p> 
   </div>
   <div class="goto-top">
       <i class="icon ypt-icon ypt-icon-right"></i>
   </div>
 </div>

// js实现（用的是jquery）
    var timer = null;
    $('.goto-top').click(function(){//点击回到顶部
        // document.body.scrollTop = document.documentElement.scrollTop = 0;
        // 上面这一句话仅仅实现回到顶部，没有动画效果，动画效果用如下方式
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn(){
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(oTop > 0){
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 100;
                //这里的100代表回到顶部的速度，可以按照实际情况调整
                timer = requestAnimationFrame(fn);
            }else{
                cancelAnimationFrame(timer);
            } 
        });
    });

说明：

1、window.requestAnimationFrame(callback);
告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。
2、window.cancelAnimationFrame（）
取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求.