欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

jQuery实现返回顶部按钮结果

发布时间:2016-11-29  编辑:杨雨个人博客网站   点击:   

当用户赏识很长的页面时,可以通过点击页面右下角的“返回顶部”按钮直达页面顶部,以利便用户举办下一步操纵。本文将行使jQuery团结CSS实现可以自由定制的各类“返回顶部”的结果。

jQuery实现返回顶部按钮结果

实现进程

当页面转动时(监听scroll变乱),赏识器转动条处于最顶部时,潜匿“返回顶部”按钮,当转动条继承向下转动时,动态计较出当前可视窗口的高度-按钮高度-按钮距赏识器下边沿高度获得的值,假如这个值大于某个特定的数字时,表现“返回顶部”按钮,不然潜匿。然后,当单击“返回顶部”按钮时,着实应该是一个链接,将转动条滚回赏识器最顶部。在这个进程中,我们可以行使animate来建设动画结果,即返回顶部时有个过渡结果。

HTML

本例依靠jQuery库,而且我们将首要的实现进程的javascript代码放入到gotoTop.js中,因此,先要在你必要挪用的页面引入这两个js文件。

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

jQuery

在页面中挪用gotoTop()要领。留意在gotoTop.js,我们动态的往body中插入了“返回顶部”按钮,它的class属性默认是.backToTop,虽然你也可以将其修改成恣意class值,只要反面你的当前页面斗嘴就行。

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

上述代码中,页面加载时挪用一次goToTop(),当转动页面或赏识器窗口巨细产生变革时也挪用goToTop()。

goToTop()提供了几个首要的参数可设置。

pageWidth:页面宽度,如960.

pageWidthJg:按钮和页面的隔断间隔,默以为2.

pageHeightJg:按钮和页面底部的隔断间隔,默以为100.

duration:回到顶部的速率时刻,默以为200,单元毫秒,假如配置为0,则返回顶部时不会有动画结果.

假如要定制按钮差异的外面,必要配置Css样式。

CSS

本文domo中给出了三个差异气魄威风凛凛的“返回顶部”按钮样式,您只必要一张图片,配置对应.backToTop的Css即可。

DEMO1:仿新浪微博。Demo1

.backToTop{width:16px; background:#dff3fd url(top.gif) no-repeat 0px 5px; padding:20px 0 4px
4px; line-height:16px;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
a.backToTop:hover{text-decoration:none; color:#f60}

DEMO2:仿QQ小我私人中心。Demo2

a.backToTop{width:28px; height:24px; background:#eaeaea url(top.gif) no-repeat -21px 4px; 
text-indent:-999em}
a.backToTop:hover{background-position:-21px -19px}

DEMO3:仿天猫商品页。Demo3

a.backToTop{width:60px; height:60px; background:url(top.gif) no-repeat -51px 0;
 text-indent:-999em}
a.backToTop:hover{background-position:-113px 0}
本文地址:http://itbyc.com/web/javascript/13851.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1