jQuery中页面返回顶部的方法总结
更新时间：2016年12月30日 14:03:55 作者：wudipmd
本文给大家总结了关于jquery中页面返回顶部的方法小结，以及各个方法的优缺点介绍，非常不错，具有参考借鉴价值，需要的朋友参考下吧
当页面过长时，通常会在页面下方有一个返回顶部的button，总结一下，大概三种实现方法，下面说下各方法及优缺点。
方法一 锚点定位
<a href="#" class="top" id="top">返回頂部</a>
这种方法设置方便，但缺点是会刷新页面（我是在同事的乐视手机上发现的）。
方法二 window.scrollTo(x,y)
<a href="javascript:scrollTo(0,0)" class="top" id="top">返回頂部</a>
这种方法也很方便，并且不会刷新页面，缺点是没有滚动效果。
scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标，比如我设置scrollTo(100,100)，就是让滚动内容的坐标（100,100）的点处在视口的左上角。
方法三 设置带有动画效果的滚动
原生方法
/* html部分 */
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<a href="javascript:;" class="top" id="top">返回頂部</a>
</body>
<style>
/* css部分 */
div {
height: 150px;
}
div:nth-child(odd) {
background-color: #8ae238;
}
div:nth-child(even) {
background-color: #66d9ef;
}
.top {
position: fixed;
right: 50px;
bottom: 50px;
display: block;
width: 50px;
height: 50px;
font-size: 20px;
background-color: white;
display: none;
}
</style>
<script>
/* js代码 */
var topBtn = document.getElementById('top');
// 获取视窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
// 获取页面向上滚动距离，chrome浏览器识别document.body.scrollTop，而火狐识别document.documentElement.scrollTop，这里做了兼容处理
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滚动超过一屏，返回顶部按钮出现，反之隐藏
if(toTop>=winHeight){
topBtn.style.display = 'block';
}else {
topBtn.style.display = 'none';
}
}
topBtn.onclick=function () {
var timer = setInterval(function () {
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判断是否到达顶部，到达顶部停止滚动，没到达顶部继续滚动
if(toTop == 0){
clearInterval(timer);
}else {
// 设置滚动速度
var speed = Math.ceil(toTop/5);
// 页面向上滚动
document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
}
},50);
}
</script>
大概的思路就是：
为window绑定scroll事件，监听页面滚动距离，当超过一屏高度时，显示返回顶部的按钮
为按钮绑定点击事件，返回顶部的方法就是获取页面滚动的距离，然后计算步长，这里采用滚动距离除以5的方式，滚动速度由快到慢。这里使用定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧'的感觉。
这种方法优点是有了动画效果，只是实现起来比较麻烦，下面介绍一下jQuery方法。
jQuery方法
jQuery方法只是在js代码部分不同，具体代码如下
<script>
/* js代码 */
$(window).on('scroll', function () {
// 判断显示还是隐藏按钮
if($(this).scrollTop()>=$(this).height()){
$('#top').fadeIn('slow');
}else {
$('#top').fadeOut('slow');
}
});
$('#top').on('click',function () {
// 设置滚动动画，这里注意使用的是$('body')不是$(window)
$('body').animate({scrollTop:'0'},500);
});
</script>
jQuery方法的优点是方便，而且动画效果比较流畅。
这里需要注意设置animate方法时使用的是jQuery封装的body对象而不是window对象，因为我们是要设置body的scrollTop属性。
总结
三个方法各有优劣，不过总体来讲，jQuery的方法更适合大多数场景。
以上所述是小编给大家介绍的jQuery中页面返回顶部的方法总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
下面小编就为大家带来一篇JQuery解析XML数据的几个简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
Jquery 滑入滑出效果实现代码，需要的朋友可以参考下。2010-03-03
发开中个人是比较喜欢用Repeater控件，特别是前台可老是遇到一个问题就是一个列表的最后一项总是和上面的样式不一样 如上面的都有下边框，最后一个就没有2010-01-01
用jquery实现的弹出菜单插件2008-12-12
作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式2014-03-03
jQuery数组处理代码详解，需要的朋友可以参考下2012-02-02
本篇文章主要是对jquery遍历checkbox的注意事项进行了说明介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了jQuery中prevUntil()方法用法,实例分析了按条件查找匹配元素之前所有的同辈元素的使用技巧,需要的朋友可以参考下2015-01-01
扩展jQuery EasyUI tree搜索树节点的方法，使其支持节点名称的模糊匹配，将不匹配的节点隐藏。下面通过本文给大家分享jQuery EasyUI tree增加搜索功能,需要的朋友可以参考下2017-04-04
升级了IE10，发现flexigrid无法显示数据，提示获取到了数据，但没任何报错任何显示,经过试验和跟踪，修改如下，有类似问题的朋友可以参考下哈2013-07-07
最新评论