当前位置:首页 »“秋了秋”个人博客 » 前端编程 » 返回顶部和底部代码

返回顶部和底部代码

作者:秋了秋 发表时间:2015年05月01日

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

复制代码
  1. var qiuyeHandler={
  2. Animate:true, //是否允许动态效果
  3. Speed:500, //执行时间
  4. Top:function(){
  5. if(qiuyeHandler.Animate==true)
  6. $("body,html").animate({ "scrollTop": 0 }, qiuyeHandler.Speed);
  7. else $("body,html").scrollTop()=0;},
  8. Botton:function(){
  9. var bodyHeight=$(document).height();
  10. if(qiuyeHandler.Animate==true)
  11. $("body,html").animate({ "scrollTop": bodyHeight+"px" }, qiuyeHandler.Speed);
  12. else $("body,html").scrollTop()=bodyHeight+"px";}}
复制代码

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

复制代码
  1. <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();返回底部

0
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://netblog.cn/blog/345.html
目录: 前端编程标签: 返回顶部特效 8707次阅读

检测到你在使用低版本浏览器不支持自动播放,请手动点击播放,将为你使用特制播放源播放。

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里