纯js 滚动到顶部函数分享

最新推荐文章于 2024-10-31 16:02:32 发布

lancelot_lewis

最新推荐文章于 2024-10-31 16:02:32 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 函数滚动平滑

本文链接：https://blog.youkuaiyun.com/Lancelot_Lewis/article/details/50421496

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的平滑滚动到页面顶部的功能。该方法不依赖于jQuery或其他库，通过定时器逐步调整scrollTop值来实现平滑滚动效果，并可根据需要调整滚动速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个简单的js 滚动到页面顶部的函数，纯js，不依赖于Jqeury。也不是直接用a标签锚点，同时速度是可控的。如下：
先贴上代码：

function gototop(gotop, speed){
    var timer;
    var oldTop = document.documentElement.scrollTop || document.body.scrollTop;
    gotop.addEventListener('click',function(){
        var speed = speed || 10;
        timer = setInterval(function(){
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            var gospeed = top/100;
            if(gospeed>speed){
                gospeed = speed;
            }else if(gospeed<3){
                gospeed = 3;
            }
            if(top>speed){
                if(document.documentElement.scrollTop){
                    top = document.documentElement.scrollTop-=speed;
                }else{
                    top = document.body.scrollTop-=speed;
                }
            }else{
                clearInterval(timer);
            }
        },5);
    });

    window.onscroll = function(e){
        var newTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(newTop>100){
            gotop.style.display = "block";
        }else{
            gotop.style.display = "none";
        }
        if(newTop>oldTop){
            clearInterval(timer);
        }
        oldTop = newTop;
    }
}