返回顶部

最新推荐文章于 2025-04-27 16:41:01 发布

最新推荐文章于 2025-04-27 16:41:01 发布 · 129 阅读

文章标签：

#返回顶部

典型小案例专栏收录该内容

13 篇文章

订阅专栏

该博客主要介绍了网页返回顶部功能的实现。通过 HTML、CSS 构建页面布局和样式，利用 jQuery 编写脚本。当滚动条滚动距离超过 200 时显示“返回顶部”按钮，点击该按钮页面会在 1000 毫秒内滚动到顶部。

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>返回顶部</title>
   <style>
       *{padding:0;margin:0;}
       .box{width:100%;height:2000px;background:#ccc;}
       .backTop{width:100px;height:100px;background:red;text-align:center;line-height:100px;
           color:#fff;position:fixed;right:10px;cursor:pointer;bottom:100px;display:none;}
       p{height:95px;border-bottom:5px solid #000;text-align:center;}
   </style>
</head>
<body>
   <div class="box">
       <p class="backTop">返回顶部</p>
   </div>
</body>
   <script src="js/jquery.js"></script>
   <script>
       $(function(){
           var h = $(document).height();
           var html ="";
           for(var i=1;i<=h/100;i++){
               html+="<p>"+i+"</p>";
           }
           $(".box").append(html);
           //var winH= $(window).height();
           $(window).scroll(function(){//滚动条滚动的距离》屏幕的高度显示 ||隐藏
               if($(window).scrollTop()>200){
                   $(".backTop").show();
               }else{
                   $(".backTop").hide();
               }
           })
           $(".backTop").click(function(){//显示 ===》点击事件页面距离顶部的距离为0
               $(document.documentElement).animate({"scrollTop":0},1000);
               $(document.body).animate({"scrollTop":0},1000);
           })
       })
   </script>
</html>