jQuery实现简单而且很酷的返回顶部效果

当用户浏览很长的页面时，可以通过点击页面右下角的“返回顶部”按钮返回到页面顶部。本文将使用gotoTop.js介绍三种“返回顶部”的效果。

淘建站为您提供更多_其它特效_Ajax_顶部_底部，在此特别感谢您对我们的支持与厚爱！

HTML

首页我们引入jQuery库和gotoTop.js。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="gotoTop.js"></script>

jQuery

“返回顶部”按钮的class是.backToTop。页面中goToTop()调用了两次，一次在加载完成后，另一次在页面滚动或浏览器窗口大小发生变化的时候。

$(function(){ 
    $(".backToTop").goToTop(); 
    $(window).bind('scroll resize',function(){ 
        $(".backToTop").goToTop(); 
    }); 
});

我们可以修改“返回顶部”按钮样式，演示中我们介绍了三款。

• 第一款：仿新浪微博。演示1
• 第二款：仿QQ个人中心。演示2
• 第三款：仿天猫商品页。演示3