(034)javascript_bom_goto_top 

  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>BOM</title>
  6     <style type="text/css">
  7         #myBtn {
  8             position: fixed;
  9             bottom: 0;
 10             right: 0;
 11         }
 12     </style>
 13     <script type="text/javascript">
 14 
 15         /**
 16          *   可视区尺寸：
 17               document.documentElement.clientWidth
 18               document.documentElement.clientHeight
 19               滚动距离:
 20               document.body.scrollTop
 21               document.documentElement.scrollTop
 22           */
 23 
 24         window.onload = function() {
 25 
 26             var myBtn = document.getElementById("myBtn");
 27             var timer = null;
 28             var isSysScroll = true;
 29 
 30             window.onscroll = function() {
 31                 if(!isSysScroll) {
 32                     clearInterval(timer);u
 33                 }
 34                 isSysScroll = false;
 35             };
 36 
 37             myBtn.onclick = function() {
 38 
 39                 timer = setInterval(function(){
 40                     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 41                     var speed = Math.floor(-scrollTop/8);
 42 
 43                     if(scrollTop == 0) {
 44                         clearInterval(timer);
 45                     }
 46 
 47                     isSysScroll = true;
 48 
 49                     document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;
 50                 },30);
 51             };
 52         };
 53         
 54 
 55     </script>
 56 </head>
 57 
 58 <body style="height:2000px;">
 59 
 60     1</br>
 61     2</br>
 62     3</br>
 63     4</br>
 64     5</br>
 65     1</br>
 66     2</br>
 67     3</br>
 68     4</br>
 69     1</br>
 70     2</br>
 71     3</br>
 72     4</br>
 73     1</br>
 74     2</br>
 75     3</br>
 76     4</br>
 77     1</br>
 78     2</br>
 79     3</br>
 80     4</br>
 81     1</br>
 82     2</br>
 83     3</br>
 84     4</br>
 85     1</br>
 86     2</br>
 87     3</br>
 88     4</br>
 89     1</br>
 90     2</br>
 91     3</br>
 92     4</br>
 93     1</br>
 94     2</br>
 95     3</br>
 96     4</br>
 97     1</br>
 98     2</br>
 99     3</br>
100     4</br>
101     1</br>
102     2</br>
103     3</br>
104     4</br>
105     1</br>
106     2</br>
107     3</br>
108     4</br>
109     1</br>
110     2</br>
111     3</br>
112     4</br>1</br>
113     2</br>
114     3</br>
115     4</br>
116     1</br>
117     2</br>
118     3</br>
119     4</br>
120     1</br>
121     2</br>
122     3</br>
123     4</br>
124     1</br>
125     2</br>
126     3</br>
127     4</br>
128     1</br>
129     2</br>
130     3</br>
131     4</br>
132     1</br>
133     2</br>
134     3</br>
135     4</br>
136     1</br>
137     2</br>
138     3</br>
139     4</br>
140     1</br>
141     2</br>
142     3</br>
143     4</br>
144     1</br>
145     2</br>
146     3</br>
147     4</br>
148     1</br>
149     2</br>
150     3</br>
151     4</br>
152     1</br>
153     2</br>
154     3</br>
155     4</br>
156     1</br>
157     2</br>
158     3</br>
159     4</br>
160     1</br>
161     2</br>
162     3</br>
163     4</br>
164     1</br>
165     2</br>
166     3</br>
167     4</br>
168     1</br>
169     2</br>
170     3</br>
171     4</br>
172     1</br>
173     2</br>
174     3</br>
175     4</br>
176     1</br>
177     2</br>
178     3</br>
179     4</br>
180     1</br>
181     2</br>
182     3</br>
183     4</br>
184     1</br>
185     2</br>
186     3</br>
187     4</br>1</br>
188     2</br>
189     3</br>
190     4</br>
191 
192     1</br>
193     2</br>
194     3</br>
195     4</br>
196 
197     <input id="myBtn" type="button" value="go to top"/>
198 </body> 
199 </html>

 

posted @ 2014-03-23 10:31  雪中飞雁  阅读(127)  评论(0)    收藏  举报