jquery实现页面常用的返回顶部效果

作者：bea

本文实例为大家分享了jquery实现返回顶部效果的全部代码，供大家参考，具体内容如下效果图：实现代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> *{ margin: 0; pad

本文实例为大家分享了jquery实现返回顶部效果的全部代码，供大家参考，具体内容如下

效果图：

实现代码：


<!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>

希望本文所述对大家学习javascript程序设计有所帮助。

有用 | 无用

jquery实现页面常用的返回顶部效果

猜你喜欢

您可能感兴趣的文章: