返回头部和底部，初始隐藏！

最新推荐文章于 2020-07-01 14:23:56 发布

转载最新推荐文章于 2020-07-01 14:23:56 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lym520/p/6117068.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript和jQuery实现网页滚动时显示返回顶部和底部按钮的方法，并通过监听滚动事件来控制按钮的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <style>
           .gotop{
               width:50px;
               height:50px;
               background: darkred;
               color: #fff;
               font-size: 16px;
               position: fixed;
               right:20px;
               bottom: 200px;
               cursor: pointer;
               display: none;
           }
           .gobottom{
               width:50px;
               height:50px;
               background: darkred;
               color: #fff;
               font-size: 16px;
               position: fixed;
               right:20px;
               bottom: 140px;
               cursor: pointer;
               display: none;
           }
       </style>
   </head>
   <body>
       <div style="height:2000px;width:800px;margin:0 auto;background: green;">


       </div>
       <div class="gotop">
           回到顶部
       </div>
       <div class="gobottom">
           回到底部
       </div>

   </body>
   <script>
       function gotop(){
             $(window).scroll(function(){
              var s=$(window).scrollTop();
              s>150 ? $(".gobottom,.gotop").css("display","block") : $(".gobottom,.gotop").css("display","none");
             });
             $(".gotop").live("click",function(){
              $("html,body").animate({scrollTop:0})
             })
             var h=$("html").height();
             $(".gobottom").live("click",function(){
              $("html,body").animate({scrollTop:h})
             })
       }
       gotop();
   </script>
</html>