首页 > 代码库 > JS 带运动的返回顶部 小案例
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)/817 * 滚动距离赋值的时候需要连等：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>
JS 带运动的返回顶部 小案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。