基于JS实现回到页面顶部的五种写法(从实现到增强)

以下是详细讲解“基于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);
    }
}

五、增加按钮控制和动画

以上的实现方式，都是跟页面元素无关的，用户需要手动调用JS才能回到页面顶部。为了更加方便用户，我们可以增加一个回到页面顶部的按钮，用户可以点击按钮来调用回到页面顶部的JS函数。同时，可以增加一些动画效果，使得回到页面顶部的过程更加美观。具体代码如下：

<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实现回到页面顶部的五种写法，从最基本的实现到高级增强，希望对您有所帮助。