零基础学做网站培训介绍

当前位置:

网页缓慢返回顶部的JS代码

在之前的建站教程中,我们介绍了JQUERY实现网页缓慢返回顶部的方法,这种方法是在JQUERY的基础上实现的。今天学做网站论坛要介绍一个网页缓慢返回顶部的JS代码,是原生的JAVASCRIPT代码来实现的。

网页缓慢返回顶部的JS代码

网页缓慢返回顶部的JS代码如下:


<script>
//JS缓慢返回顶部
let back=document.getElementById('goTopBtn');
let duration = 500;
back.onclick = function () {
    let l = document.documentElement.scrollTop;
    console.log(l);
    let s = l / 600 * 25;  //路程/时间=s *25每隔25ms秒 动的路程
    let st = setInterval(function () {
        l -= s;
        if (l <= 0) {
            l = 0; //当l<=0时,设置l=0
            clearInterval(st);
        }
        document.documentElement.scrollTop = l;
    }, 25)
}
</script>

如果不需要缓慢的效果,直接跳到顶部,可以使用以下的JS代码:


<script>
//JS直接返回顶部
let back=document.getElementById('goTopBtn');
back.onclick=function () {
    document.documentElement.scrollTop=0;
}
</script>

除了JS代码之外,当然还需要一个向上的点击按钮,按钮的ID必须是goTopBtn;

相关阅读:

如何制作网站中的“返回顶部”(带缓冲)功能

“返回顶部”按钮制作方法

网站如何制作“返回顶部”按钮(附代码)

发表评论

电子邮件地址不会被公开。 必填项已用*标注