实现点击回到顶部功能

5 种实现页面回到顶部的方法：锚点、scrollTop、scrollTo、scrollBy 和 scrollIntoView

问题

如何实现点击按钮后页面滚动回到顶部的功能？

解答

方法 1：锚点

在页面顶部放置一个锚点，通过链接跳转实现回到顶部。

<body style="height:2000px;">
    <div id="topAnchor"></div>
    <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>

方法 2：scrollTop

通过设置 scrollTop 属性为 0 来实现。scrollTop 表示元素上方被隐藏的像素数。

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    </script>
</body>

方法 3：scrollTo

scrollTo(x, y) 方法可以滚动到指定坐标位置，设置为 (0, 0) 即可回到顶部。

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            scrollTo(0, 0);
        }
    </script>
</body>

方法 4：scrollBy

scrollBy(x, y) 方法按相对量滚动，传入当前滚动距离的负值即可回到顶部。

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            var top = document.body.scrollTop || document.documentElement.scrollTop;
            scrollBy(0, -top);
        }
    </script>
</body>

方法 5：scrollIntoView

scrollIntoView() 方法可以将元素滚动到可见区域。在顶部放置目标元素，点击时让该元素滚动到视口内。

<body style="height:2000px;">
    <div id="target"></div>
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            target.scrollIntoView();
        }
    </script>
</body>

关键点

锚点方法最简单，但会改变 URL 的 hash 值
scrollTop 需要同时设置 body 和 documentElement 以兼容不同浏览器
scrollTo 和 scrollBy 是 window 对象的方法，使用更直接
scrollIntoView 可以接受布尔值参数，true 表示元素顶部对齐视口顶部
所有方法都可以配合 smooth 滚动行为实现平滑动画效果