简单几步实现返回顶部效果
更新时间：2016年12月05日 10:34:55 作者：劳卜
本文分享了网页中经常出现的返回顶部效果，相比原生Javascript,jquery实现起来能够省略不少代码。希望对大家有所帮助
今天与大家分享下网页中经常出现的返回顶部效果
相比原生Javascript，jquery实现起来能够省略不少代码。
接下来就直接贴代码啦：
$(function(){
$(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发
var wHeight=$(window).height(); //获取浏览器可视窗口高度
var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度
if(wTop>=wHeight) //当滚动条距离顶部高度超过一屏时执行
{
$("#btn").show(); //返回顶部按钮显示
}
else{
$("#btn").hide(); //返回顶部按钮隐藏
}
});
$("#btn").click(function(){
$("html,body").animate({scrollTop:0},500); //页面500毫秒返回顶部
});
});
ok，是不是很简单，jquery直接为我们提供的animate方法可以很快实现返回顶部的动画效果。
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持脚本之家！
相关文章
jquery 常用操作方法这样的文件脚本之家发布的也比较多了，但每个人整理的不相同，大家可以参考脚本之家之前的发布的文章结合一下比较好。2010-01-01
本文给大家介绍的是一种检测返回值的数据类型的方法，有需要的小伙伴可以参考下。2015-07-07
本篇文章主要介绍了jQuery时间验证和转换为标准格式的时间示例代码，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
在网站前端开发中，浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把各种判断方法都总结一下，希望对大家有所帮助2014-09-09
这篇文章主要通过实例向大家介绍了Javascript与jQuery方法的隐藏与显示的方法,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了基于jquery实现三级下拉菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了jQuery实现上传图片前预览效果功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了jquery实现两个div中的元素相互拖动的方法,结合实例形式分析了jQuery基于鼠标事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2020-04-04
这篇文章介绍了Jquery封装tab自动切换效果的具体实现方法，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了jQuery基于json与cookie实现购物车的方法,涉及jQuery操作json格式数据与cookie存储购物车信息的相关技巧,需要的朋友可以参考下2016-04-04
最新评论