JavaScript实现网页带动画返回顶部的方法详解

当我们浏览很长的网页时，我们会发现有时候需要快速回到页面的顶部。通常，我们可以直接点击页面的滚动条或者键盘的 Home 键，但这种方式比较突兀。另外，很多时候我们需要一个能够流畅返回顶部的效果。在这里，我们将详细讲解使用JavaScript实现网页带动画返回顶部的方法。

实现步骤

实现网页带动画返回顶部的方法，具体步骤如下：

判断页面是否需要显示“返回顶部”按钮。
给“返回顶部”按钮添加点击事件。
在点击事件中，平滑滚动页面到顶部。

下面，我们将分别介绍每个步骤的实现方法。

判断页面是否需要显示“返回顶部”按钮

首先，我们需要判断页面是否已经滚动到一定高度，如果已经滚动则需要显示“返回顶部”按钮，否则不需要。可以使用scrollTop属性获取页面当前垂直滚动的距离，如下：

// 获取窗口滚动条距离页面顶部的距离
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

说明：上述代码可以兼容多种浏览器。

接下来，我们可以根据scrollTop的值来判断是否需要显示“返回顶部”按钮，如果大于某个阈值，则显示按钮，否则隐藏按钮。例如，下面的代码会在页面滚动超过100像素后，显示一个返回顶部的超链接：

window.onscroll = function(){
    var toTop = document.querySelector('.to-top'); // 获取返回顶部按钮的元素
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(scrollTop>100){
        toTop.style.display = 'block';
    } else {
        toTop.style.display = 'none';
    }
}

给“返回顶部”按钮添加点击事件

接下来，我们需要给“返回顶部”按钮添加点击事件。通过设置window.scroll()方法的第三个参数，可以实现平滑滚动页面。例如，下面的代码会在点击按钮后，平滑地滚动页面至顶部：

var toTopButton = document.querySelector('.to-top');
toTopButton.addEventListener('click',function(){
    scrollTo(0,0,{
        duration:800,
        timingFunction:function(timeFraction){
            return timeFraction;
        }
    });
});

function scrollTo(to,duration,callback){
    var element = document.documentElement;
    var from = element.scrollTop;
    var start = performance.now();

    function scroll(timestamp){
        var time = timestamp - start;
        var progress = Math.min(time/duration,1);

        function easeOutQuad(progress){
            return progress * (2 - progress);
        };

        element.scrollTop = from + (to - from) * easeOutQuad(progress);

        if(progress < 1){
            requestAnimationFrame(scroll);
        } else {
            callback();
        }
    }

    requestAnimationFrame(scroll);
}

平滑滚动页面到顶部

最后，我们需要实现一个平滑滚动页面的方法，这个方法会根据滚动距离的时间来调整滚动速度。例如，下面的代码会实现一个简单的缓动函数，根据进度值返回当前动画阶段的滚动距离：

function scrollTo(to,duration,callback){
    var element = document.documentElement;
    var from = element.scrollTop;
    var start = performance.now();

    function scroll(timestamp){
        var time = timestamp - start;
        var progress = Math.min(time/duration,1);

        function easeOutQuad(progress){
            return progress * (2 - progress);
        };

        element.scrollTop = from + (to - from) * easeOutQuad(progress);

        if(progress < 1){
            requestAnimationFrame(scroll);
        } else {
            callback();
        }
    }

    requestAnimationFrame(scroll);
}

将这段代码与“返回顶部”按钮点击事件结合使用，即可完成页面的平滑滚动到顶部。

示例

这里提供两个示例，一个是基于jQuery的示例，另一个是基于原生JavaScript的示例。

基于jQuery的示例

<!DOCTYPE html>
<html>
    <head>
        <title>返回顶部示例（jQuery）</title>
    </head>
    <body>
        <div style="height:2000px;"></div>
        <a href="#" class="back-to-top">返回顶部</a>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(function(){
                // 返回顶部按钮显示/隐藏逻辑
                $(window).scroll(function(){
                    if ($(window).scrollTop()>=100){
                        $('.back-to-top').fadeIn();
                    } else {
                        $('.back-to-top').fadeOut();
                    }
                });

                // 平滑滚动至顶部
                $('.back-to-top').click(function(){
                    $('html,body').animate({scrollTop:0},500);
                    return false;
                });
            });
        </script>
    </body>
</html>

基于原生JavaScript的示例

<!DOCTYPE html>
<html>
    <head>
        <title>返回顶部示例（JavaScript）</title>
    </head>
    <body>
        <div style="height:2000px;"></div>
        <a href="#" class="back-to-top">返回顶部</a>
        <script>
            // 返回顶部按钮显示/隐藏逻辑
            window.onscroll = function(){
                var toTop = document.querySelector('.back-to-top');
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop>100){
                    toTop.style.display = 'block';
                } else {
                    toTop.style.display = 'none';
                }
            }

            // 平滑滚动至顶部
            document.querySelector('.back-to-top').onclick = function(){
                var scrollTop = window.scrollY;
                scrollTo(scrollTop,0,500);
            }

            function scrollTo(from,to,duration){
                var start = performance.now();
                var element = document.documentElement;

                function scroll(timestamp){
                    var time = timestamp - start;
                    var progress = Math.min(time/duration,1);

                    function easeOutQuad(progress){
                        return progress * (2 - progress);
                    };

                    element.scrollTop = from + (to - from) * easeOutQuad(progress);

                    if(progress < 1){
                        requestAnimationFrame(scroll);
                    }
                }

                requestAnimationFrame(scroll);
            }
        </script>
    </body>
</html>

通过以上示例，你可以学习到如何使用jQuery或原生JavaScript实现平滑滚动页面回到顶部的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现网页带动画返回顶部的方法详解 - Python技术站