对回到顶部按钮的理解

最新推荐文章于 2023-11-12 19:12:34 发布

qq_30414027

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量338

点赞数

本文链接：https://blog.csdn.net/qq_30414027/article/details/47443381

版权

    现在很多网页的右下角都会设有一个回到顶部按钮来方便用户使用，经过学习对回到顶部按钮有了初步的了解，下面就来谈谈我的理解。
   制作一个回到顶部按钮大致上分为3步：
   (1)

<html>
      <head>
      <style>
      #btn1 {position:fixed; bottom:0; right:0;}
      </style>
      <title>回到顶部按钮1</title>
      <script>
      window.οnlοad=function ()
        {
            var oBtn=document.getElementById('btn1');
            oBtn.οnclick=function ()
             {
                setInterval(function (){
                   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                   var iSpeed=Math.floor(-scrollTop/8);
                   document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
                                       }, 30);
             };
        };
      </script>
      </head>
     <body>
          <input id="btn1" type="button" value="回到顶部" />
     </body>
     </html>

   一般情况下按钮都在右下角因此需要给它设置一个固定定位将它固定在右下角，当我们点击回到顶部按钮时页面会向上滑动，
   可以用一个计时器让它每隔一段时间(30毫秒，可以自己设置)就触发计时器里面的函数。
   之前看代码时一直不懂为什么是-scollTop/8，其实8只不过是一个时间，滚动条滚动的路程除时间就是速度，当你把时间变大时，相应的当你点击按钮是回到顶部的速度会变慢，scrollTop+iSpeed中iSpeed是个负数因此加起来结果变小，表示滚动距离变小，即页面在向上滑动。当然如果将 var iSpeed=Math.floor(-scrollTop/8)中的负号去掉，下面代码也就相应的改为-iSpeed,这样反而更
   好理解一些。
   这样做出来的回到顶部按钮还是有很大的不足，比如当你点击按钮后，你再次向下滚动滚动条时页面会和你做对拼命向上跑，因为   计时器被触发后并没有停下来，下来就来说说如何改进这个缺陷。
   (2)

   <html>
       <head>
       <style>
             #btn1 {position:fixed; bottom:0; right:0;}
       </style>
       <title>无标题文档</title>
       <script>
            window.οnlοad=function ()
             {
                var oBtn=document.getElementById('btn1');
                var timer=null;
                oBtn.οnclick=function ()
                  {
                     timer=setInterval(function (){
                     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                     var iSpeed=Math.floor(-scrollTop/8);
                     if(scrollTop==0)
                        {
                           clearInterval(timer);
                        }
                     document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
                           }, 30);
                  };
             };
       </script>
       </head>
       <body>
            <input id="btn1" type="button" value="回到顶部" />
       </body>
  </html>

       通过if语句判断，如果滚动距离为0，就停止(清除)计时器。虽然有了改进，可是当我们点了按钮但是还并没有回到顶部这个期间
       如果想控制滚动条就需要进一步的改进。
       (3)

<html>
        <head>
        <style>
             #btn1 {position:fixed; bottom:0; right:0;}
        </style>
        <title>无标题文档</title>
        <script>
         window.οnlοad=function ()
           {
             var oBtn=document.getElementById('btn1');
             var bSys=true;
             var timer=null;
          //如何检测用户拖动了滚动条
             window.οnscrοll=function ()
               {
                  if(!bSys)
                    {
                      clearInterval(timer);
                    }
                  bSys=false;
               };
    
             oBtn.οnclick=function ()
              {
                 timer=setInterval(function (){
                 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                 var iSpeed=Math.floor(-scrollTop/8);
                 if(scrollTop==0)
                   {
                      clearInterval(timer);
                   }
                bSys=true;
                document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
                           }, 30);
              };
           };
         </script>
         </head>
         <body>
         <input id="btn1" type="button" value="回到顶部" />
         </body>
  </html>

        给bSys一个初始值true,当用户没有拖动滚动条时bSys不变，页面依旧回到顶部，如果用户自己滚动滚动条，则执行window.οnscrοll=function ()这个函数，通过if语句停止计时器，然后再令bSys=false,阻止下面的代码让页面回到顶部。

qq_30414027

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对回到顶部按钮的理解

现在很多网页的右下角都会设有一个回到顶部按钮来方便用户使用，经过学习对回到顶部按钮有了初步的了解，下面就来谈谈我的理解。制作一个回到顶部按钮大致上分为3步： (1) #btn1 {position:fixed; bottom:0; right:0;} 回到顶部按钮1 windo
复制链接

扫一扫