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

时间：2024-10-18 18:34:41

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>6.带运动的返回顶部</title>

         <meta name="author" content="Administrator" />

         <!-- Date: 2014-12-12 -->

         <style>

             #goTop{width:50px;height:50px;border-radius:5px;background:#006666;position:fixed;right:10px;bottom:10px;text-align:center;line-height:50px;}

         </style>

         <script>

             /**滚动条 带运动返回顶部

              * 运动的值就是  滚动条距离文档顶部的距离,在定时器内获取值

              * 速度 就是目标点(0-当前的scrollTop)/8

              * 滚动距离赋值的时候需要连等：

              * document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed**/

             window.onload=function(){

                 var oDiv=document.getElementById('goTop');

                 var timer=null;

                 var b=1;

                 function setTop(){

                      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                 }

                 window.onscroll=function(){

                     if( b!=1 ){ //如果b=1,那么b是被定时器触发的,如果不等,就是被其他事件触发,这个时候就要关掉定时器

                         clearInterval(timer);

                     }

                     b=2

                 }

                 oDiv.onclick=function(){

                     clearInterval(timer)

                       timer=setInterval(function(){

                               var iCur = document.documentElement.scrollTop || document.body.scrollTop;

                             var iSpeed = Math.floor((0 - iCur)/8);

                                 document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed;

                             b=1;

                             if(iCur == 0){

                                 clearInterval(timer)

                             }

                       },30)

                 }

             }

         </script>

     </head>

     <body style="height:2000px;">

         <div id="goTop">Top</div>

     </body>

 </html>

相关文章