jQuery 返回顶部代码

最新推荐文章于 2021-08-26 18:06:39 发布

徐行致远

最新推荐文章于 2021-08-26 18:06:39 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/linyiphp/article/details/79020926

jQuery 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的返回顶部按钮方案。该方案通过监听滚动事件来显示或隐藏按钮，并利用jQuery简化动画效果。适用于网页长内容的快速定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果预览（http://www.qh66.net/）：

HTML代码：

<a href="javascript:void(0);" id="goTopButton" class="gotop_btn"> </a>
<script type="text/javascript">
$(document).ready(function(){
   $('#goTopButton').click(function(event){
       $('html, body').animate({scrollTop:0}, 300);
   });
   $(window).scroll(function(event){
       if($(this).scrollTop() > 0){
           if($.browser.ie6){
               $('#goTopButton').css('top', $(this).scrollTop() + $(this).height() - 100);
           }
           if($('#goTopButton').css('display') == 'none'){
               $('#goTopButton').fadeIn();
           }
       }else{
           $('#goTopButton').fadeOut();
       }
   });
});
</script>

CSS样式：
/* gotop_btn */
.gotop_btn { display:none; position:fixed; _position:absolute; left:50%; bottom:140px; width:21px; height:70px; margin-left:485px; background:url(../images/backtop.gif) no-repeat; }
.gotop_btn:hover { background-position:-21px 0; text-decoration:none; }

图片：