Loading... 现在有这样一个需求:返回顶部的按钮悬浮在右下角,默认是隐藏的,当页面下拉到一定高度后才会显示,然后点击按钮平滑缓慢的返回顶部。 好,我们先来写结构,在这里懒的写css,就用个人写的一个小框架<a href="http://yawrap.yaw.ee" target="_blank" rel="noopener">Yawrap</a>来代替,感兴趣的童鞋欢迎前来拍砖。 `<img id="backup" class="no fix" r="50" b="50" w="50" yawsrc="../img/backup.png" alt="返回顶部">`  然后我们来写功能,请看大屏幕~ ``` //定义返回顶部的方法,并传入速度和距离两个参数 function yawTotop(speed,distance) { let yawtotop = document.querySelector('.yaw-totop'); //来一个滚动监听事件 window.onscroll = function() { //定义一个空的时间 let time = null; //如果滚动高度大于我们设置的高度时就显示 if (document.body.scrollTop || document.documentElement.scrollTop > 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 > 0){ document.body.scrollTop = document.documentElement.scrollTop = oTop - speed; time = requestAnimationFrame(fn); }else{ cancelAnimationFrame(time); } }) } } } //速度为60,这个值越大滑动速度越快;距离值为300,距离顶部300px时才会显示; yawTotop(60,300); ``` 关于里面的requestAnimationFrame,这是一个浏览器用于定时循环操作的一个接口,相比用setTimeout它的优点是节省系统资源,提高系统性能,改善视觉效果,这里不详细阐述它的使用。 最后上图看效果:  最后修改:2019 年 06 月 05 日 01 : 18 PM © 允许规范转载 赞赏 如果觉得我的文章对你有用,请随意赞赏 ×Close 赞赏作者 扫一扫支付 支付宝支付 微信支付
回滚顶部JS不能用scrollTo(0,0)吗,似乎更简单一些
这个是带有滚动动画效果的,不是一下子就回到顶部,看起来不友好,要这样的话直接a链接指向"#"更简单
太麻烦啦。Jquery 一下子就搞定了。scrolltop 属性!
JQ代码量是少, 但是你得引入JQ库, 加载页面就要多加载一个文件, 论性能还是原生大法好
鼠标一点,返回顶部。
坚持更新,做好自己
又是一波骚操作 :grin:
:grin: :grin: :grin:
一直用的是JQ,学习了、
当然JQ能写的更少一些,Write less, do more :mrgreen: