点击返回页面顶部（h5、js、jQuery 三种方式）

约定不等于承诺〃 2023-02-22 12:21 14阅读 0赞

当页面过长时，通常会在滚动条到一定位置时设置按钮，点击可以快速返回顶部或者指定的位置处。

参考文档：[jQuery中页面返回顶部的方法总结][jQuery]

#### 方法一：锚点定位 ####

当点击a标签，会直接返回到顶部；如果p标签有id属性值，a标签href设置为该p标签的id属性值，则点击该a标签可以跳到此p标签处。

//p*40{$} 回车     可以自动形成p标签，innerHTML为1~40。
    
    <p>1</p>
    <p>2</p>
       .
       .
       .
    <p id="special">12</p>
       .
       .
       .
    <p>40</p>
    
    <a href="#">返回顶部</a>
    <a href="#special">返回指定id处</a>

这种方法设置方便，但缺点是会刷新页面。  
![在这里插入图片描述][20200703153357273.gif]

#### 方法二：window.scrollTo(x,y) ####

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

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

![在这里插入图片描述][20200703153725458.gif]

#### 方法三：设置带有动画效果的滚动回顶部 ####

###### 1、js方法 ######

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

为按钮绑定点击事件，返回顶部的方法就是获取页面滚动的距离，然后计算步长，这里采用滚动距离除以16的方式，滚动速度由快到慢。这里使用定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧’的感觉。

![在这里插入图片描述][20200703201603496.gif]  
这种方法优点是有了动画效果，只是实现起来比较麻烦，下面介绍一下jQuery方法。

###### 2、jQuery方法 ######

![在这里插入图片描述][20200703164316591.gif]

返回顶部的div一开始被隐藏，然后做一个操作：判断何时显示div。

*  本文提出两种，一种是设定固定高度，滚动下来的实际高度距离顶部的距离>50时，显示div；
 *  另一种是跟窗口可视高度进行比较，如果滚动条滚动的实际高度>=窗口可视高度，则显示div。

还需要注意的是，在jQuery中，`$(window).scrollTop()`代表窗口滚动条滚动下来的实际高度；`$(window).height()`代表此时窗口可视高度（窗口大小改变比如缩小，窗口可视高度随之改变）。

整体可以看出，使用jQuery代码简练，而且动画效果比较流畅。

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

jQuery的方法更适合大多数场景。

以上就是目前整理到的三种方法。

[jQuery]: https://www.jb51.net/article/101694.htm
[20200703153357273.gif]: https://img-blog.csdnimg.cn/20200703153357273.gif
[20200703153725458.gif]: https://img-blog.csdnimg.cn/20200703153725458.gif
[20200703201603496.gif]: https://img-blog.csdnimg.cn/20200703201603496.gif
[20200703164316591.gif]: https://img-blog.csdnimg.cn/20200703164316591.gif