jQuery中页面返回顶部的方法总结

当页面过长时，通常会在页面下方有一个返回顶部的button，总结一下，大概三种实现方法，下面说下各方法及优缺点。

方法一 锚点定位

rush:js;">

这种方法设置方便，但缺点是会刷新页面（我是在同事的乐视手机上发现的）。

方法二 window.scrollTo(x,y)

这种方法也很方便，并且不会刷新页面，缺点是没有滚动效果。

scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标，比如我设置scrollTo(100,100)，就是让滚动内容的坐标（100,100）的点处在视口的左上角。

方法三 设置带有动画效果的滚动

原生方法

rush:js;"> /* html部分 */

大概的思路就是：

为window绑定scroll事件，监听页面滚动距离，当超过一屏高度时，显示返回顶部的按钮

为按钮绑定点击事件，返回顶部的方法就是获取页面滚动的距离，然后计算步长，这里采用滚动距离除以5的方式，滚动速度由快到慢。这里使用定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧'的感觉。 这种方法优点是有了动画效果，只是实现起来比较麻烦，下面介绍一下jQuery方法。

jQuery方法

jQuery方法只是在js代码部分不同，具体代码如下

rush:js;">

jQuery方法的优点是方便，而且动画效果比较流畅。

这里需要注意设置animate方法时使用的是jQuery封装的body对象而不是window对象，因为我们是要设置body的scrollTop属性。

总结

三个方法各有优劣，不过总体来讲，jQuery的方法更适合大多数场景。

以上所述是小编给大家介绍的jQuery中页面返回顶部的方法总结。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文地址：https://www.jb51.cc/jquery/42973.html