原生js实现平滑返回顶部效果可自定义速度和距离显示

Author： Yawee
发布时间：March 7, 2018
5430 views
8 comments
1771 字数
Categories：学无止境

现在有这样一个需求：返回顶部的按钮悬浮在右下角，默认是隐藏的，当页面下拉到一定高度后才会显示，然后点击按钮平滑缓慢的返回顶部。

好，我们先来写结构，在这里懒的写css，就用个人写的一个小框架Yawrap来代替，感兴趣的童鞋欢迎前来拍砖。
<img id="backup" class="no fix" r="50" b="50" w="50" yawsrc="../img/backup.png" alt="返回顶部">

原生js实现平滑返回顶部效果可自定义速度和高度显示

然后我们来写功能，请看大屏幕~

//定义返回顶部的方法,并传入速度和距离两个参数
function yawTotop(speed,distance) {
    let yawtotop = document.querySelector('.yaw-totop');
    //来一个滚动监听事件
    window.onscroll = function() {
        //定义一个空的时间
        let time = null;
        //如果滚动高度大于我们设置的高度时就显示
        if (document.body.scrollTop || document.documentElement.scrollTop &gt; distance) {
            yawtotop.style.display = 'block';
        } else {
            yawtotop.style.display = 'none';
        }
        yawtotop.style.cursor = 'pointer';
        //点击按钮返回顶部
        yawtotop.onclick = function() {
            cancelAnimationFrame(time);
            time = requestAnimationFrame(function fn(){
            let oTop = document.body.scrollTop || document.documentElement.scrollTop;
                if(oTop &gt; 0){
                    document.body.scrollTop = document.documentElement.scrollTop = oTop - speed;
                    time = requestAnimationFrame(fn);
                }else{
                    cancelAnimationFrame(time);
                }
            })
        }
    }
}
//速度为60,这个值越大滑动速度越快;距离值为300,距离顶部300px时才会显示;
yawTotop(60,300);

关于里面的requestAnimationFrame，这是一个浏览器用于定时循环操作的一个接口，相比用setTimeout它的优点是节省系统资源，提高系统性能，改善视觉效果，这里不详细阐述它的使用。

最后上图看效果：

原生js实现平滑返回顶部效果可自定义速度和高度显示

Last modification：June 5th, 2019 at 01:18 pm

If you think my article is useful to you, please feel free to appreciate

8 comments

重庆整形
September 13, 2018

太麻烦啦。Jquery 一下子就搞定了。scrolltop 属性！

Reply
1. YaweeAuthor
  September 13, 2018
  
  @重庆整形
  JQ代码量是少, 但是你得引入JQ库, 加载页面就要多加载一个文件, 论性能还是原生大法好
  
  Reply
微型水泵
May 21, 2018

鼠标一点，返回顶部。

Reply
我爱辅助论坛
May 8, 2018

坚持更新，做好自己

Reply
xiaomo
March 8, 2018

又是一波骚操作 :grin:

Reply
1. Yawee
  March 8, 2018
  
  @xiaomo
  :grin: :grin: :grin:
  
  Reply
芭比
March 7, 2018

一直用的是JQ，学习了、

Reply
1. YaweeAuthor
  March 7, 2018
  
  @芭比
  当然JQ能写的更少一些，Write less, do more :mrgreen:
  
  Reply