今天写了一个回到顶部的demo,没有复杂的逻辑，所以想来分享。
原理：
1.css上把按钮固定定位在浏览器右下角上，默认为隐藏。
2.当页面滚动的时候（window.onscroll），按钮block,
3.当点击按钮的时候让页面的可视区高度距离浏览器顶端逐渐减少直至为0，
a)此时需要用到一个定时器，初设为每30毫秒执行一次，
b)设置一个参数iSpeed，初始设为300,让可视区高度距离浏览器顶端的距离每30毫秒减少300（参数，可变），直至为0.
4，当可视区距浏览器顶端的距离为0时，关闭定时器，按钮none。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到顶部</title> <style> #but1{ position: fixed; bottom: 0; right: 0; display: none; } </style> <script> window.onload = function(){ var oBtn = document.getElementById('but1'); var timer = null; window.onscroll = function() { oBtn.style.display = 'block'; //当页面滚动时按钮呈现 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; oBtn.onclick = function(){ var iSpeed = 200; timer = setInterval(function(){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //可视区距页面顶端的距离 document.documentElement.scrollTop = document.body.scrollTop = scrollTop - iSpeed; if (scrollTop == 0) { //如果可视区到达顶部，取消定时器 clearInterval(timer); } },30); }; if (scrollTop == 0) { oBtn.style.display = 'none'; } } }; </script> </head> <body style="height:2000px;"> <input type="button" id="but1" value="回到顶部"/> </body> </html>
注：oBtn.style.display = 'none';不能写入oBtn.onclick内，否则如果是自己拖动可视区至浏览器顶端时按钮不会none,因为只有当按钮触发时，display = 'none'才会执行，
另scrollTop也要单独提取出来，因为作用域，函数外部无法访问函数内部的变量。