知识问答

基于JS实现回到页面顶部的五种写法

发布时间：2026-05-09 23:46:07 浏览量：0

以下是详细讲解“基于JS实现回到页面顶部的五种写法(从实现到增强)”的完整攻略。

一、引言

在网页的开发过程中，经常会遇到需要让网页回到页面顶部的需求，比如用户滑动较长页面后，需要快速回到顶部，提高用户体验。本文将介绍基于JS实现回到页面顶部的五种写法，包括从最基本的实现到功能增强的高级写法。

二、基本实现

最基本的实现方式就是通过JS设置scrollTop属性来实现页面滚动，具体的代码如下：

function backToTop() {    window.scrollTo(0, 0);}

当然，这种方式的缺点也很明显，页面的滚动效果很生硬，不能让用户更好的感受到回到页面顶部的过程。

三、实现平滑滚动

为了让用户更好的感受到回到页面顶部的过程，需要实现平滑滚动的效果，具体的做法是通过设置定时器来逐渐逼近页面顶部，实现缓慢滚动的效果，具体代码如下：

function backToTop() {    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;    if (currentScroll > 0) {        window.requestAnimationFrame(backToTop);        window.scrollTo(0, currentScroll - (currentScroll / 5));    }}

这种方式的效果已经比基本实现要好很多了，但还有提升的余地。

四、实现带缓动的平滑滚动

为了让页面的滚动更加自然，可以实现带缓动的平滑滚动。这里的缓动效果是通过使用贝塞尔曲线实现的，具体代码如下：

function backToTop() {    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    if (scrollTop > 0) {        window.requestAnimationFrame(backToTop);        window.scrollTo(0, scrollTop - scrollTop / 8);    }}

五、增加按钮控制和动画

<button id="back-to-top">回到顶部</button><style>    #back-to-top {        position: fixed;        bottom: 20px;        right: 20px;        display: none;        cursor: pointer;        z-index: 999;        opacity: .6;        transition: opacity .3s;    }    #back-to-top:hover {        opacity: 1;    }</style><script>    var backToTopEle = document.querySelector('#back-to-top');    var body = document.body;    var docElem = document.documentElement;    var offset = 100;    var scrollPos;    var scrollTimer = null;    window.addEventListener('scroll', function() {        scrollPos = window.pageYOffset || docElem.scrollTop || body.scrollTop;        if (scrollPos > offset) {            backToTopEle.style.display = 'block';        } else {            backToTopEle.style.display = 'none';        }    });    backToTopEle.addEventListener('click', function() {        scrollTimer = setInterval(function() {            scrollPos = window.pageYOffset || docElem.scrollTop || body.scrollTop;            if (scrollPos > 0) {                window.scrollTo(0, scrollPos - scrollPos / 8);            } else {                clearInterval(scrollTimer);            }        }, 30);    });</script>

六、结语

到此为止，我们讲解了基于JS实现回到页面顶部的五种写法，从最基本的实现到高级增强，希望对您有所帮助。