现在很多网页都是宽屏，并且只有一些，很长很长，这时候一个“回到顶部”的按钮是显得很重要了。写了一个小demo，很轻松的搞定这个功能。
-----------------------------------------------正文开始-----------------------------------------------------------
先完成html把基本信息写出来
给很多<div></div>占据很长很长的页面，最后给一个<span id="goTop"></span>作为“回到顶部”的按钮。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js回到顶部</title> 6 </head> 7 <body> 8 <div>I want to go back to the top.</div><br/> 9 <div>I want to go back to the top.</div><br/> 10 <div>I want to go back to the top.</div><br/> 11 <div>I want to go back to the top.</div><br/> 12 <div>I want to go back to the top.</div><br/> 13 <div>I want to go back to the top.</div><br/> 14 <div>I want to go back to the top.</div><br/> 15 <div>I want to go back to the top.</div><br/> 16 <div>I want to go back to the top.</div><br/> 17 <div>I want to go back to the top.</div><br/> 18 <div>I want to go back to the top.</div><br/> 19 <div>I want to go back to the top.</div><br/> 20 <div>I want to go back to the top.</div><br/> 21 <div>I want to go back to the top.</div><br/> 22 <div>I want to go back to the top.</div><br/> 23 <div>I want to go back to the top.</div><br/> 24 <div>I want to go back to the top.</div><br/> 25 <div>I want to go back to the top.</div><br/> 26 <div>I want to go back to the top.</div><br/> 27 <div>I want to go back to the top.</div><br/> 28 <div>I want to go back to the top.</div><br/> 29 <div>I want to go back to the top.</div><br/> 30 <div>I want to go back to the top.</div><br/> 31 <div>I want to go back to the top.</div><br/> 32 <div>I want to go back to the top.</div><br/> 33 <div>I want to go back to the top.</div><br/> 34 <div>I want to go back to the top.</div><br/> 35 <div>I want to go back to the top.</div><br/> 36 <div>I want to go back to the top.</div><br/> 37 <div>I want to go back to the top.</div><br/> 38 <div>I want to go back to the top.</div><br/> 39 <div>I want to go back to the top.</div><br/> 40 <div>I want to go back to the top.</div><br/> 41 <div>I want to go back to the top.</div><br/> 42 <div>I want to go back to the top.</div><br/> 43 <div>I want to go back to the top.</div><br/> 44 <div>I want to go back to the top.</div><br/> 45 <div>I want to go back to the top.</div><br/> 46 <div>I want to go back to the top.</div><br/> 47 <div>I want to go back to the top.</div><br/> 48 <div>I want to go back to the top.</div><br/> 49 <div>I want to go back to the top.</div><br/> 50 <div>I want to go back to the top.</div><br/> 51 <div>I want to go back to the top.</div><br/> 52 <div>I want to go back to the top.</div><br/> 53 <div>I want to go back to the top.</div><br/> 54 <span id="goTop"></span> 55 </body> 56 </html>
接下来给按钮一个css样式吧。
1 <style> 2 #goTop{ 3 display:none; 4 position:fixed; 5 bottom:20px; 6 background:url(http://cdn.w3cfuns.com/resource/images/scrolltop.png) no-repeat 0 0; 7 width:34px; 8 height:34px; 9 cursor:pointer; 10 right:20px; 11 } 12 </style>
看，以下这个图图就是准备回到顶部的按钮。
css中 display:none;已经把这个隐藏了，但别担心，在js中我们实现了 ： 当鼠标滚轮下滑时它才会出现。
------------------------------------------现在开始JS文件啦--------------------------------------------
现在先框一个JS的框框。
1 <script> 2 window.onload=function(){ }; 3 </script>
再贴上js里的所有代码：
1 <script> 2 window.onload=function(){ 3 var timer=null; 4 var goTop=document.getElementById("goTop"); //获取“回到顶部”的按钮 5 goTop.onclick=function(){ //点击按钮之后触发的函数 6 timer=setInterval(function(){ 7 var top=document.body.scrollTop+document.documentElement.scrollTop;//获取当前位置离顶部的距离 8 var speed=top/5;//设置回到顶部的速度 9 if(document.body.scrollTop){ 10 document.body.scrollTop-=speed; 11 } 12 else{ 13 document.documentElement.scrollTop-=speed; 14 } 15 if(top==0){ 16 clearInterval(timer); 17 } 18 },30); 19 }; 20 window.onscroll=function(){ //当距离大于500时才让按钮出现，否则就不显示 21 if(document.body.scrollTop+document.documentElement.scrollTop>=500){ 22 goTop.style.display="block"; 23 } 24 else{ 25 goTop.style.display="none"; 26 } 27 }; 28 window.onmousewheel=function(e){//当滚轮是向下滚时，就将向上滚的函数停止执行 29 if(e.wheelDelta<0) clearInterval(timer); 30 }; 31 }; 32 </script>
完毕了。可以实现了。以下贴上整个页面的代码。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js回到顶部</title> 6 <script> 7 window.onload=function(){ 8 var timer=null; 9 var goTop=document.getElementById("goTop"); //获取“回到顶部”的按钮 10 goTop.onclick=function(){ //点击按钮之后触发的函数 11 timer=setInterval(function(){ 12 var top=document.body.scrollTop+document.documentElement.scrollTop;//获取当前位置离顶部的距离 13 var speed=top/5;//设置回到顶部的速度 14 if(document.body.scrollTop){ 15 document.body.scrollTop-=speed; 16 } 17 else{ 18 document.documentElement.scrollTop-=speed; 19 } 20 if(top==0){ 21 clearInterval(timer); 22 } 23 },30); 24 }; 25 window.onscroll=function(){ //当距离大于500时才让按钮出现，否则就不显示 26 if(document.body.scrollTop+document.documentElement.scrollTop>=500){ 27 goTop.style.display="block"; 28 } 29 else{ 30 goTop.style.display="none"; 31 } 32 }; 33 window.onmousewheel=function(e){//当滚轮是向下滚时，就将向上滚的函数停止执行 34 if(e.wheelDelta<0) clearInterval(timer); 35 }; 36 }; 37 </script> 38 </head> 39 <body> 40 <div>I want to go back to the top.</div><br/> 41 <div>I want to go back to the top.</div><br/> 42 <div>I want to go back to the top.</div><br/> 43 <div>I want to go back to the top.</div><br/> 44 <div>I want to go back to the top.</div><br/> 45 <div>I want to go back to the top.</div><br/> 46 <div>I want to go back to the top.</div><br/> 47 <div>I want to go back to the top.</div><br/> 48 <div>I want to go back to the top.</div><br/> 49 <div>I want to go back to the top.</div><br/> 50 <div>I want to go back to the top.</div><br/> 51 <div>I want to go back to the top.</div><br/> 52 <div>I want to go back to the top.</div><br/> 53 <div>I want to go back to the top.</div><br/> 54 <div>I want to go back to the top.</div><br/> 55 <div>I want to go back to the top.</div><br/> 56 <div>I want to go back to the top.</div><br/> 57 <div>I want to go back to the top.</div><br/> 58 <div>I want to go back to the top.</div><br/> 59 <div>I want to go back to the top.</div><br/> 60 <div>I want to go back to the top.</div><br/> 61 <div>I want to go back to the top.</div><br/> 62 <div>I want to go back to the top.</div><br/> 63 <div>I want to go back to the top.</div><br/> 64 <div>I want to go back to the top.</div><br/> 65 <div>I want to go back to the top.</div><br/> 66 <div>I want to go back to the top.</div><br/> 67 <div>I want to go back to the top.</div><br/> 68 <div>I want to go back to the top.</div><br/> 69 <div>I want to go back to the top.</div><br/> 70 <div>I want to go back to the top.</div><br/> 71 <div>I want to go back to the top.</div><br/> 72 <div>I want to go back to the top.</div><br/> 73 <div>I want to go back to the top.</div><br/> 74 <div>I want to go back to the top.</div><br/> 75 <div>I want to go back to the top.</div><br/> 76 <div>I want to go back to the top.</div><br/> 77 <div>I want to go back to the top.</div><br/> 78 <div>I want to go back to the top.</div><br/> 79 <div>I want to go back to the top.</div><br/> 80 <div>I want to go back to the top.</div><br/> 81 <div>I want to go back to the top.</div><br/> 82 <div>I want to go back to the top.</div><br/> 83 <div>I want to go back to the top.</div><br/> 84 <div>I want to go back to the top.</div><br/> 85 <div>I want to go back to the top.</div><br/> 86 <span id="goTop"></span> 87 </body> 88 </html>
原文：http://www.cnblogs.com/abigale/p/4855327.html