滚动到指定距离

martinlpy

于 2022-04-02 09:45:24 发布

阅读量143

点赞数 3

文章标签： JavaScript 滚动事件定时器 DOM操作滚动动画

本文链接：https://blog.csdn.net/m0_69045017/article/details/123913339

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 10000px;
            background-image: linear-gradient(red, gold, blue, green, pink, purple, yellowgreen, orange);
        }

        #back {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border-radius: 50%;
            background-color: #fff;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
</head>

<body>
    <div id="back">滚动到5000</div>
    <script>
        var back = document.getElementById('back');

        back.onclick = function () {
            var st = document.documentElement.scrollTop || document.body.scrollTop;

            // 500ms跑过去
            var v = Math.abs(st - 5000) / 500 * 16.6667;


            var timer = setInterval(() => {
                // st < 5000 从上往下滚动
                if (st < 5000) {
                    st += v;
                    if (st >= 5000) { // 如果从上往下滚动到5000的时候，需要停止滚动
                        clearInterval(timer);
                    }
                } else { // 从下往上滚动
                    st -= v;
                    if (st <= 5000) { // 如果从下往上滚动到5000的时候，需要停止滚动
                        clearInterval(timer);
                    }
                }
                document.documentElement.scrollTop = st;
            }, 16.6667);
        }


    </script>
</body>

</html>