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程序设计有所帮助。