点击返回页面顶部（h5、js、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>

这种方法设置方便，但缺点是会刷新页面。

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

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

<a href="javascript:scrollTo(0,0)">返回顶部</a>

scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标.

比如我设置scrollTo(100,100)，就是让滚动内容的坐标（100,100）的点处在视口的左上角。

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

1、js方法

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

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

<style>p {width: 100px;height: 50px;background: tomato;}div {width: 100px;height: 30px;background: yellowgreen;color: white;text-align: center;line-height: 30px;position: fixed; /*使用固定定位*/bottom: 50px;right: 50px;}
</style><p>1</p>
<p>2</p>...
<p id="special">12</p>...
<p>40</p>
<div id="toTop">back to top</div><script>var toTop = document.querySelector("#toTop");    toTop.style.display = "none";// 一开始div隐藏  window.addEventListener("scroll", scrollHandler);// 然后给window加事件监听，滚动条大于某个值时，div出现function scrollHandler(e) {        var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容写法，获取当前页面y轴的滚动距离if (distanceY > 50) {toTop.style.display = "block";} else {toTop.style.display = "none";}}// 然后给div添加点击事件，用计时器interval来循环，步长为5，scrollTop依次减5，时间每50ms循环一次，直到scrollTop为0清除计时器toTop.addEventListener("click", clickHandler);function clickHandler(e) {let timer = setInterval(function () {var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容if (distanceY == 0){clearInterval(timer);return;} var speed = Math.ceil(distanceY/16);//speed这个值从高变低，那么scrollTop就减得从快到慢，上回到顶部的速度就先快后慢document.documentElement.scrollTop=distanceY-speed;// document.documentElement.scrollTop=distanceY-5;//如果给速度一个确定的值，那回到顶部的就匀速}, 16);}</script>

这种方法优点是有了动画效果，只是实现起来比较麻烦，下面介绍一下jQuery方法。

2、jQuery方法

<script>$(function () {$("#toTop").hide();//一开始隐藏掉div$(window).scroll(function () {//console.log("scollTop：", $(this).scrollTop());//这个 this-->window  滚动条距离顶部的距离//console.log("height：", $(this).height());//窗口可视高度// if ($(window).scrollTop() > 50) {//判断条件1：设置如果滚动条距离顶部大于50px时，#toTop出现if ($(this).scrollTop() >= $(this).height()) {//判断条件2：如果滚动条滚动的实际高度>=窗口可视高度，则#toTop出现$("#toTop").fadeIn(500);//淡入，设置渐变时间持续0.5秒} else {$("#toTop").fadeOut(500);//淡出}})// 点击div，返回顶部$("#toTop").click(function () {// $(window).scrollTop(0);//直接这样没有滚动效果// 采用动画的形式，让整个文档网上滑动$("body,html").animate({//html是最外层标签，可以代表整个页面；body 是它二级标签，可以用它代表页面的文档部分// "body,html"都写上，兼容多浏览器scrollTop: 0}, 500);//500是滚动到顶部所需要的时间0.5秒})})</script>

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

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

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

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

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

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

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