//--------兼容版本的平滑滚动效果
//-------------使用百分比减值达到平滑的效果，使用body.scrollTop||documentElement.scrollTop检测浏览器内核，使用bySys检测用户的滚动行为
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>smoothScroll</title> 6 </head> 7 <style type="text/css"> 8 #returnTop{position: fixed;bottom: 40px;right: 40px;} 9 </style> 10 <script type="text/javascript"> 11 window.onload=function(){ 12 var i=0; 13 var timer=null; 14 var bySys=true; 15 oUl=document.getElementsByTagName('ul')[0]; 16 oBtn=document.getElementsByTagName('input')[0]; 17 for(i=0;i<10;i++){ 18 oUl.innerHTML+=oUl.innerHTML; 19 } 20 window.onscroll=function(){ 21 if(!bySys) clearInterval(timer); 22 bySys=false; 23 } 24 oBtn.onclick=function(){ 25 if(document.body.scrollTop){ 26 timer=setInterval(function(){ 27 bySys=true; 28 document.body.scrollTop-=Math.ceil(0.2*document.body.scrollTop); 29 if(document.body.scrollTop==0) clearInterval(timer); 30 },30); 31 } 32 if(document.documentElement.scrollTop){ 33 timer=setInterval(function(){ 34 bySys=true; 35 document.documentElement.scrollTop-=Math.ceil(0.2*document.documentElement.scrollTop); 36 if(document.documentElement.scrollTop==0) clearInterval(timer); 37 },30); 38 } 39 } 40 } 41 </script> 42 <body> 43 <ul> 44 <li>111</li> 45 </ul> 46 <input type="button" value="returnTop" id="returnTop" /> 47 </body> 48 </html>