足球游戏_中国足彩网¥体育资讯$

jquery实现页面常用的返回顶部效果
来源:易贤网 阅读:749 次 日期:2016-08-02 15:56:03
温馨提示:易贤网小编为您整理了“jquery实现页面常用的返回顶部效果”,方便广大网友查阅!

本文实例为大家分享了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实现页面常用的返回顶部效果
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标