当前位置:首页 > 编程教程 > jQuery技术文章 > jquery实现页面常用的返回顶部效果

jquery实现网页返回顶部的实例代码

  • 发布时间:
  • 作者:码农之家
  • 点击:160

这篇文章主要知识点是关于jquery、返回顶部、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战
jQuery实战高清第三版
  • 类型:jQuery大小:99.0 MB格式:PDF作者:Bear Bibeault
立即下载

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

本文实例为大家分享了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程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • jquery实现可返回拖动轨迹的拖拽实例代码
  • 理解jQuery返回定位插件
  • jquery二级导航菜单的示例效果
  • jQuery根据类型自动显示和隐藏表单效果示例
  • jQuery实现多标签页切换的效果
  • jQuery实现刮刮卡效果的实例代码和实现方法
  • jquery Tab效果和动态加载示例代码
  • jQuery实现文字无缝滚动效果(marquee插件)
  • jquery插件dialog实现弹框效果的实例内容
  • jquery幻灯片效果实例代码
  • 相关电子书
    学习笔记

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com