JS 带运动的返回顶部小案例

浏览数：20 / 时间：2015年06月09日

带运动的返回顶部：当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器。下面的方法b 就是清掉的方法

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>6.带运动的返回顶部</title>
 8         <meta name="author" content="Administrator" />
 9         <!-- Date: 2014-12-12 -->
10         <style>
11             #goTop{width:50px;height:50px;border-radius:5px;background:#006666;position:fixed;right:10px;bottom:10px;text-align:center;line-height:50px;}
12         </style>
13         <script>
14             /**滚动条 带运动返回顶部
15              * 运动的值就是  滚动条距离文档顶部的距离,在定时器内获取值
16              * 速度 就是目标点(0-当前的scrollTop)/8
17              * 滚动距离赋值的时候需要连等：
18              * document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed**/
19             window.onload=function(){
20                 var oDiv=document.getElementById(‘goTop‘);
21                 var timer=null;
22                 var b=1;
23                 function setTop(){
24                      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
25                 }
26                 
27                 window.onscroll=function(){
28                      
29                     if( b!=1 ){ //如果b=1,那么b是被定时器触发的,如果不等,就是被其他事件触发,这个时候就要关掉定时器
30                         clearInterval(timer);
31                     }
32                     b=2 
33                 }
34                 
35                 oDiv.onclick=function(){
36                     clearInterval(timer)
37                       timer=setInterval(function(){
38                               var iCur = document.documentElement.scrollTop || document.body.scrollTop;
39                             var iSpeed = Math.floor((0 - iCur)/8);
40                             
41                                 document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed;
42                             b=1;
43                             
44                             if(iCur == 0){
45                                 clearInterval(timer)
46                             }
47                             
48                       },30)  
49                 }
50             }
51         </script>
52     </head>
53     <body style="height:2000px;">
54         <div id="goTop">Top</div>
55     </body>
56 </html>