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

来源:https://www.sucaihuo.com/js/31.html 2015-04-06 17:53浏览(3762) 收藏

当用户浏览很长的页面时,可以通过点击页面右下角的“返回顶部”按钮返回到页面顶部。本文将使用gotoTop.js介绍三种“返回顶部”的效果。
jQuery实现简单而且很酷的返回顶部效果
分类:其它特效 > Ajax 难易:初级
查看演示 下载资源 下载积分: 20 积分

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(); 
    }); 
});

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

<ul class='ul_demo'> <li>第一款:仿新浪微博。<a href='http://www.sucaihuo.com/jquery/demo/31/' target='_blank'>演示1</a></li> <li>第二款:仿QQ个人中心。<a href='http://www.sucaihuo.com/jquery/demo/31/index2.html' target='_blank'>演示2</a></li> <li>第三款:仿天猫商品页。<a href='http://www.sucaihuo.com/jquery/demo/31/index3.html' target='_blank'>演示3</a></li> </ul>

标签: 顶部底部返回
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2