弹性返回顶部

相信"返回顶部"这个效果已经随处可见了，刚刚学了BOM，加上之前有学运动，就随手做了一个弹性的，

好了，先贴代码吧。

 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>返回顶部弹性效果</title>
 6 <!--在此就不考虑IE6了，完全兼容除IE6以外的浏览器（IE7——10，Chrome,FireFox,oparo,safari）-->
 7 
 8 <style>
 9 body{ height:1200px;}
10 #btn{ width:30px; height:100px; background:#999999; 
11 position:fixed; right:60px; bottom:80px; line-height:20px;
12 text-align:center;cursor:pointer; font-size:16px; display:none;}
13 </style>
14 <script>
15 
16 function Buffe(obj)//弹性方法
17 {
18        var timer=null;
19        timer=setInterval(function(){
20        var iSpeed=document[obj].scrollTop/5;
21        if(document[obj].scrollTop==0)
22        {
23          clearInterval(timer);
24        }
25        else
26        {
27         document[obj].scrollTop=document[obj].scrollTop-iSpeed;
28        }
29       
30        
31        },30); 
32 }
33 
34 window.onload=function()
35 {
36    
37     oBtn=document.getElementById('btn');
38     
39     oBtn.onclick=function (){
40     if(document.documentElement.scrollTop)
41     {
42       Buffe('documentElement');
43     }
44     else
45     {
46       Buffe('body');     
47     }
48         
49         returnTop();
50 }
51         
52     window.onscroll=returnTop;
53         
54     function returnTop(){
55      var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
56         if(scrollTop==0){
57             oBtn.style.display="none";
58             
59             }
60             
61             
62             else{
63                 oBtn.style.display="block";
64                 
65                 }
66     
67         }
68 
69 };
70 
71 </script>
72 </head>
73 
74 <body>
75 <div id="btn">返回顶部</div>
76 </body>
77 </html>

之所以不考虑IE6，是想让IE6的用户主动舍弃IE6，这样才能促进IT的发展。
而且新浪微博它就没兼容IE6。

如果非要兼容的话，也不是不可，要兼容IE6版本的可以联系我。

秒客网

弹性返回顶部

相关文章