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

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

网页缓慢返回顶部的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；

如果你的网页中已经引入了JQUERY，可以使用以下的JQUERY代码实现缓慢到顶的效果。

<script type="text/javascript">

jQuery(document).ready(

function($){

//返回顶部

$('.scroll_top').click(

function(){

$('html,body').animate({scrollTop: '0px'}, 800);

});

//返回底部

$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);}); });

</script>