现在有这样一个需求：返回顶部的按钮悬浮在右下角，默认是隐藏的，当页面下拉到一定高度后才会显示，然后点击按钮平滑缓慢的返回顶部。
好，我们先来写结构，在这里懒的写css，就用个人写的一个小框架Yawrap来代替，专为懒的写css党而生，感兴趣的童鞋欢迎前来拍砖。
<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它的优点是节省系统资源，提高系统性能，改善视觉效果，这里不详细阐述它的使用。
最后上图看效果：
鼠标一点，返回顶部。
坚持更新，做好自己
又是一波骚操作 :grin:
:grin: :grin: :grin:
一直用的是JQ，学习了、
当然JQ能写的更少一些，Write less, do more :mrgreen: