1、返回顶部（完全兼容各个浏览器，不含美化）
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 #div1 { 8 width:20px; 9 height:100px; 10 position:absolute; 11 top:0; 12 right:0; 13 background:#f00; 14 } 15 </style> 16 17 <script> 18 //完全兼容所有浏览器 19 var bSys=null;//标志用户滚动了滚动条 20 var timer=null; 21 window.onload=window.onresize=window.onscroll=function() { 22 var oDiv=document.getElementById("div1"); 23 var sctop=document.body.scrollTop||document.documentElement.scrollTop; 24 var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2; 25 oDiv.style.top=sctop+t+‘px‘; 26 //检测用户滚动了滚动条 27 if(!bSys) { 28 clearInterval(timer); 29 } 30 bSys=false; 31 32 oDiv.onclick=function() { 33 timer=setInterval(function() { 34 var scrolltop=document.body.scrollTop||document.documentElement.scrollTop; 35 var ispeed=Math.floor(-scrolltop/8); 36 if(scrolltop==0) { 37 clearInterval(timer); //当scrolltop为0的时候，就停止这个定时器 38 } 39 bSys=true; 40 document.documentElement.scrollTop=document.body.scrollTop=scrolltop+ispeed; 41 },30); 42 }; 43 }; 44 </script> 45 </head> 46 47 <body> 48 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 49 <div id="div1">返回顶部</div> 50 </body> 51 </html>
2、返回顶部2（完全兼容各个浏览器，含美化+缓冲）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>返回顶部+缓冲</title> 6 <style> 7 #div1{width:100px; height:50px; position:absolute; right:0px; top:0px;background:red;} 8 span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;} 9 //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 10 </style> 11 <script> 12 13 window.onload=window.onscroll=window.onresize=function() { 14 var oDiv=document.getElementById("div1"); 15 var sct=document.documentElement.scrollTop||document.body.scrollTop; 16 var t=sct+(document.documentElement.clientHeight-oDiv.offsetHeight)/2; 17 startMove(parseInt(t)); //scrolltop,ff/ie:document.documentElement chrome:document.body获取 18 }; 19 20 21 var timer=null; 22 function startMove(iTarget) { 23 var oDiv=document.getElementById("div1"); 24 var iSpeed=null; 25 clearInterval(timer); 26 timer=setInterval(function() { 27 iSpeed=(iTarget-oDiv.offsetTop)/8; 28 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //变速改变速度 29 if(oDiv.offsetTop==iTarget) { 30 clearInterval(timer); 31 } 32 else { 33 oDiv.style.top=oDiv.offsetTop+iSpeed+‘px‘; 34 } 35 },30); 36 } 37 </script> 38 </head> 39 <body style="height:2000px;"> 40 </body> 41 </html>
3、拖拽（完全兼容各个浏览器，不含美化）
1 function drag() { 2 var oDiv=document.getElementById(‘div1‘); 3 var disX=disY=0; 4 oDiv.onmousedown=function(ev) { 5 var oEvent=ev||event; 6 disX=oEvent.clientX-oDiv.offsetLeft; 7 disY=oEvent.clientY-oDiv.offsetTop;//保存物体以鼠标单击瞬间时的位置 8 9 document.onmousemove=function(ev) { 10 var oEvent=ev||event; 11 var l=oEvent.clientX-disX; 12 var t=oEvent.clientY-disY; 13 if(l<0) 14 l=0; 15 else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) 16 l=document.documentElement.clientWidth-oDiv.offsetWidth; 17 if(t<0) 18 t=0; 19 else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) 20 t=document.documentElement.clientHeight-oDiv.offsetHeight; 21 oDiv.style.left=l+‘px‘; 22 oDiv.style.top=t+‘px‘; 23 }; 24 25 document.onmouseup=function() { 26 document.onmousemove=document.onmouseup=null; 27 }; 28 return false;//解决ff早期的bug发生 29 }; 30 31 32 }
4、缓冲运动（//运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{width:100px; height:50px; position:absolute; left:700px; top:50px;background:red;} 8 span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;} 9 //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8 10 </style> 11 <script> 12 window.onload=function() { 13 var oDiv=document.getElementById("div1"); 14 var obt=document.getElementById("obt"); 15 var timer=null; 16 var iSpeed=null; 17 var iTarget=300; 18 obt.onclick=function() { 19 clearInterval(timer); 20 21 timer=setInterval(function() { 22 iSpeed=(iTarget-oDiv.offsetLeft)/8; 23 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 24 if(oDiv.offsetLeft==iTarget) { 25 clearInterval(timer); 26 } 27 else { 28 oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘; 29 } 30 },30); 31 }; 32 }; 33 </script> 34 </head> 35 36 <body> 37 <input type="button" value="开始运动" id="obt"/> 38 <div id="div1"></div> 39 <span></span> 40 </body> 41 </html>
5、待续...
原文：http://www.cnblogs.com/codc-5117/p/4071804.html
