JS回到顶部

JS回到顶部
今天我就来简单的说说用JS实现回到顶部
HTML:

Hello

...

回到顶部

CSS: .container{ border: 1px solid black; } #top{ position: fixed; padding: 10px; width: 20px; border: 1px solid black; box-shadow: 0 0 2px #333; right: 20px; bottom: 20px; } #top:hover{ cursor: pointer; } JS代码: 首先创建一个变量 var scroll_Top = document.getElementById('top'); 用最常用的scrollTop属性实现 var timer = null; function scrollTop() { 取消一个通过调用requestAnimationFrame()方法添加到计划中的动画帧请求. cancelAnimationFrame(timer); requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率一般来说，这个频率为每秒60帧 timer = requestAnimationFrame(function sTop() { var top = document.body.scrollTop || document.documentElement.scrollTop; if (top > 0) { 使用定时器，将scrollTop的值每次减少20（自行设置），直到减少到0，则滚动完毕 document.body.scrollTop = document.documentElement.scrollTop = top - 20; timer = requestAnimationFrame(sTop); } else { cancelAnimationFrame(timer); } }); } scroll_Top.addEventListener('click', scrollTop, false);