简单几步实现返回顶部效果
今天与大家分享下网页中经常出现的返回顶部效果
相比原生Javascript，jquery实现起来能够省略不少代码。
接下来就直接贴代码啦：
$(function(){
$(window).scroll(function(){//scroll--浏览器滚动条滚动式触发
varwHeight=$(window).height();//获取浏览器可视窗口高度
varwTop=$(window).scrollTop();//获取滚动条距离顶部高度
if(wTop>=wHeight)//当滚动条距离顶部高度超过一屏时执行
{
$("#btn").show();//返回顶部按钮显示
}
else{
$("#btn").hide();//返回顶部按钮隐藏
}
});
$("#btn").click(function(){
$("html,body").animate({scrollTop:0},500);//页面500毫秒返回顶部
});
});
ok，是不是很简单，jquery直接为我们提供的animate方法可以很快实现返回顶部的动画效果。
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持毛票票！
热门推荐
1 小托班祝福语简短
7 七十年祝福语简短
10 买车新年祝福语简短创意
11 卡片朋友祝福语大全简短
12 老师给家长祝福语简短
13 新春祝福语大全 英语简短
14 姓陈简短生日祝福语
15 清新唯美生日祝福语简短
16 简短的几句新年祝福语
17 自己生日祝福语段子简短
18 巧克力情侣祝福语大全简短