当用户浏览很长的页面时,可以通过点击页面右下角的“返回顶部”按钮返回到页面顶部。本文将使用gotoTop.js介绍三种“返回顶部”的效果。
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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791