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

参考文档：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的方法更适合大多数场景。

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