zoukankan html css js c++ java

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

带运动的返回顶部：当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器。下面的方法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>

View Code

查看全文

相关阅读:
git常用命令(转载)
坑爹的跨域iframe高度
 Linux命令－cat
redis之内存分配malloc底层实现（转）
redis之jedis客户端使用shardjedis config
多线程--生产者消费者以及死锁
 约瑟夫环问题--递推解法
 应用层协议小结之HTTP协议
 Colidity-- MaxDoubleSliceSum
操作系统--用户空间和内核空间，用户态和内核态

原文地址：https://www.cnblogs.com/webskill/p/4159740.html

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

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