js实现页面返回顶部效果

最新推荐文章于 2024-03-19 10:15:00 发布

MMMark7

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/zhangjiahao7521/article/details/82961668

版权

本文将介绍如何利用JavaScript实现一个简单的页面滚动到顶部的功能。通过点击按钮或者触发特定事件，页面能够平滑地返回到顶部，提高用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style type="text/css">
         *{
             margin: 0;
             padding: 0;
         }
         .wrap{
             height: 2000px;
         }
         .gotop{
             display: block;
             width: 32px;
             height: 32px;
             background-color: red;
             text-align: center;
             text-decoration: none;
             font-size: 14px;
             font-weight: bold;
             color: white;
             line-height: 32px;
             position: fixed;
             right:50px;
             bottom:50px; 
             opacity: 0;
             /*top: 500px;*/
         }
    </style>
</head>
<body>
      <div class="wrap">
             <a href="###" class="gotop">TOP</a>
      </div>
      <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
      <script type="text/javascript">
        $(function(){
                 // 当滚动条滚动大于200时出现，未大于，消失
                 $(window).scroll(function(){
                     if($(document).scrollTop()<200){
                         // alert("kk");
                         $(".gotop").stop().animate({
                              
                                  opacity: 0
                                 
                         },1000)
                     }
                     else{
                         $(".gotop").show().stop().animate({
                                  
                                  opacity: 1
                                 
                         },1000)
                     }
                })
             // 返回顶部
             $(".gotop").on("click",function(){
                   $("html,body").animate({
                          scrollTop:0
                   },1000)
             })
        })
      </script>
</body>
</html>

注：自行导入jquery