Day6--------smoothScroll

时间：2014-11-26 01:09:58 收藏：0 阅读：278
 //--------兼容版本的平滑滚动效果
 //-------------使用百分比减值达到平滑的效果，使用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>