当前位置:秋叶网络博客 前端编程 ◊ 返回顶部和底部代码

返回顶部和底部代码

作者:秋叶 发表时间:2015年5月01日


这是一段jq实现返回顶部和底部的代码,核心jq代码为以下:

var qiuyeHandler={
Animate:true, //是否允许动态效果
Speed:500, //执行时间
Top:function(){
if(qiuyeHandler.Animate==true)
$("body,html").animate({ "scrollTop": 0 }, qiuyeHandler.Speed);
else $("body,html").scrollTop()=0;},
Botton:function(){
var bodyHeight=$(document).height();
if(qiuyeHandler.Animate==true)
$("body,html").animate({ "scrollTop": bodyHeight+"px" }, qiuyeHandler.Speed);
else $("body,html").scrollTop()=bodyHeight+"px";}}

通过绑定按钮即可实现返回顶部和底部,如:

<a class="btn56" href="javascript:void(0);" onclick="qiuyeHandler.Top();">回到顶部</a><a class="btn56" href="javascript:void(0);" onclick="qiuyeHandler.Botton();">回到底部</a>

通过调用qiuyeHandler.Top();返回顶部,调用qiuyeHandler.Botton();返回底部

转载请保留链接:返回顶部和底部代码 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/345.html
目录: 前端编程 | 标签: | 6378次阅读