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

2019-11-20 10:27:07

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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实现TAB选项卡切换特效简单演示

下一篇：JavaScript模拟鼠标右键菜单效果