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

博主： Yawee
发布时间：2018 年 03 月 07 日
8224次浏览
10 条评论
1614字数
分类：学无止境

现在有这样一个需求：返回顶部的按钮悬浮在右下角，默认是隐藏的，当页面下拉到一定高度后才会显示，然后点击按钮平滑缓慢的返回顶部。好，我们先来写结构，在这里懒的写css，就用个人写的一个小框架<a href="http://yawrap.yaw.ee" target="_blank" rel="noopener">Yawrap</a>来代替，感兴趣的童鞋欢迎前来拍砖。 <code><img id="backup" class="no fix" r="50" b="50" w="50" yawsrc="../img/backup.png" alt="返回顶部"></code><img src="/usr/uploads/2018/03/20180307093151.png" alt="原生js实现平滑返回顶部效果 可自定义速度和高度显示" title="原生js实现平滑返回顶部效果 可自定义速度和高度显示"> 然后我们来写功能，请看大屏幕~<pre><code>//定义返回顶部的方法,并传入速度和距离两个参数
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);</code></pre>关于里面的requestAnimationFrame，这是一个浏览器用于定时循环操作的一个接口，相比用setTimeout它的优点是节省系统资源，提高系统性能，改善视觉效果，这里不详细阐述它的使用。最后上图看效果：<img src="https://img.yawzhou.com/2018/03/20180307.gif" alt="原生js实现平滑返回顶部效果 可自定义速度和高度显示" title="原生js实现平滑返回顶部效果 可自定义速度和高度显示">

最后修改：2019 年 06 月 05 日 01 : 18 PM

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

邮箱 *

地址

10 条评论

虫子
4 个月前

回滚顶部JS不能用scrollTo（0,0）吗，似乎更简单一些

回复
1. Yawee
  4 个月前
  
  @虫子
  这个是带有滚动动画效果的，不是一下子就回到顶部，看起来不友好，要这样的话直接a链接指向"#"更简单
  
  回复
重庆整形
2018 年 09 月 13 日

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

回复
1. Yawee
  2018 年 09 月 13 日
  
  @重庆整形
  JQ代码量是少, 但是你得引入JQ库, 加载页面就要多加载一个文件, 论性能还是原生大法好
  
  回复
微型水泵
2018 年 05 月 21 日

鼠标一点，返回顶部。

回复
我爱辅助论坛
2018 年 05 月 08 日

坚持更新，做好自己

回复
xiaomo
2018 年 03 月 08 日

又是一波骚操作 :grin:

回复
1. Yawee
  2018 年 03 月 08 日
  
  @xiaomo
  :grin: :grin: :grin:
  
  回复
芭比
2018 年 03 月 07 日

一直用的是JQ，学习了、

回复
1. Yawee
  2018 年 03 月 07 日
  
  @芭比
  当然JQ能写的更少一些，Write less, do more :mrgreen:
  
  回复