jQuery页面到页面顶部的方法摘要

当页面太长时，通常会有一个返回页面顶部的按钮。实现它可能有三种方法。我们来谈谈下面的方法及其优缺点。

方法一锚点位置
回到顶端
这个方法很容易设置，但缺点是它会刷新页面（我在同事的手机上找到）。

方法二window.scrollto（x，y）
回到顶端
这个方法也很方便，而且不刷新页面，缺点是没有滚动效果。

scrollto收到用于定位视图滚动内容区域的左上角坐标参数，如我的scrollto（100100），是协调滚动的内容（100100）在视口的左上角的点。

方法三：设置具有动画效果的滚动条

本地方法
HTML


回到顶端
CSS / ***
{ div
身高：150px；
}
n个子（奇数）{
背景颜色：# 8ae238；
}
n个子（偶数）{
背景颜色：# 66d9ef；
}
{。顶
位置：固定；
右：50px；
底部：50px；
显示块；
宽度：50px；
身高：50px；
字体大小：20px；
背景颜色：白色；
显示：无；
}
代码
无功topbtn = document.getelementbyid（最重要的）；
获取窗口高度
无功winheight = document.documentelement.clientheight；
window.onscroll =函数（）{
/ /得到的页面滚动距离，Chrome浏览器识别document.body.scrolltop，Firefox和document.documentelement.scrolltop来做鉴定，兼容处理
功往上爬的= document.documentelement.scrolltop document.body.scrolltop | |；
如果超过滚动屏幕，返回到顶部按钮并隐藏
如果（上> = winheight）{
topbtn.style.display =阻止；
{ }人
topbtn.style.display =不关；
}
}
TopBtn。onclick =函数（）{
VaR定时器= setInterval（）函数（）{
功往上爬的= document.documentelement.scrolltop document.body.scrolltop | |；
是否到达顶部，到达顶部停止滚动，没有到达顶部继续滚动。
如果（往上爬的= = 0）{
ClearInterval（定时器）；
{ }人
设置滚动速度
速度= math.ceil（上 / 5）；
页滚动
文档。文档元素}。scrollTop =文件。身体。scrollTop =往上爬的速度；
}
}，50）；
}
这个想法是：

若要将滚动事件绑定到窗口，请监视页面滚动距离，并在屏幕超出屏幕高度时显示顶部按钮。

要绑定按钮单击事件，返回顶部的方法是获取页面滚动的距离，然后计算步长。滚动距离除以5，滚动速度快到慢。这里使用计时器控制滚动频率，建议设定一个较小的值，如果时间间隔有跳过的感觉。

这种方法的优点是它具有动画效果，但实现起来比较麻烦，下面是jQuery方法。

jQuery的方法

jQuery方法只是js代码的一部分，具体代码如下所示
代码
$（窗口），（'scroll功能（））{
显示或隐藏按钮/判断
如果（$（this）。ScrollTop（> = $）（这）（的高度））{
$（#顶）。FadeIn（慢的）；
{ }人
$（#顶）。FadeOut（慢的）；
}
}）；
$（#顶部），（听到咔哒声，函数（））{
/ /设置滚动动画，这里是用美元（美元'body）（没有窗）
$（'body）。动画（{ scrollTop：0}，500）；
}）；
jQuery方法的优点是方便，动画效果流畅。

需要注意的是，在设置动画的重要方法，我们使用jQuery封装体的对象而不是窗口对象，因为我们身体的scrollTop属性。

总结

这三种方法各有优缺点，但总的来说，jQuery方法更适用于大多数场景。

以上是在jQuery引入Xiaobi返回页面顶部的方式总结。我们希望能帮助你。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。