在网页中,我们经常用到回到顶部的需求,特别是在有些很长的页面中,为了提高用户体验而实现的回到顶部或者底部。现在分享下自己使用Jquery实现的回到顶部与回到底部。
源代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var TopBttomHandler={
Animate:true, //是否允许动态效果
Speed:500, //执行时间
ReturnTop:function(){
if(TopBttomHandler.Animate==true)
$("body,html").animate({ "scrollTop": 0 }, TopBttomHandler.Speed);
else
$("body,html").scrollTop()=0;
},
ReturnBotton:function(){
var bodyHeight=$(document).height();
if(TopBttomHandler.Animate==true)
$("body,html").animate({ "scrollTop": bodyHeight "px" }, TopBttomHandler.Speed);
else
$("body,html").scrollTop()=bodyHeight "px";
}
}
|
说明:
Animate(参数):是否允许动态效果 默认为true
Speed(参数):动态效果执行时间 默认为500毫秒
ReturnTop:回到顶部
ReturnBotton:回到底部