js控制页面滚动条缓慢回到顶部

最新推荐文章于 2024-09-01 10:53:15 发布

小白趟坑

最新推荐文章于 2024-09-01 10:53:15 发布

阅读量1.2k

点赞数 4

文章标签： jquery

原文链接：https://www.cnblogs.com/rachelch/p/7999039.html

版权

js控制点击，页面缓慢回到顶部
jq版本，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div style="height: 3000px"></div>
<button class="back-to-top">回到顶部</button>
</body>
<script>
    $('.back-to-top').click(function (event) {
        event.preventDefault();
        var currentLocation = document.documentElement.scrollTop;// 获取当前滚动条的位置
        var task = setInterval(function (){  // setInterval循环周期调用
            if (currentLocation>0){
                window.scrollTo(0,currentLocation);
                currentLocation -=10  // 相比上次位置减10，根据自己需要的速度修改
            }else {
                window.scrollTo(0,0);
                clearInterval(task)  //回到顶部后，清除已执行的的循环事件
            }
        },1)
    })
</script>
</html>