js返回顶部

瑶骨

已于 2023-01-19 14:53:38 修改

阅读量205

点赞数

文章标签： javascript html 前端 Powered by 金山文档

于 2023-01-08 18:34:38 首次发布

本文链接：https://blog.csdn.net/qq_47243637/article/details/128603952

版权

<!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: 4000px;
        }

        div {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            position: fixed;
            top: 800px;
            right: 100px;
        }
    </style>
</head>

<body>
    <div>返回顶部</div>
    <script>
        let div = document.querySelector('div')

        div.onclick = function () {
            var st = document.documentElement.scrollTop; // 获取页面卷出去的距离

            // 时间: 200ms

            // 速度=路程/时间  screenTop/200ms  1ms 走多远  
            // 1ms走的路程 * 30 =====30ms走的路程
            // 1  ms走的路程 * 16.66666 =   16.66666ms走的路程

            // 求速率
            var v = (st - 0) / 200 * 16.66666;

            var timer = setInterval(() => {

                st -= v;

                // 停止计时器
                if (st <= 0) {
                    clearInterval(timer)
                }

                document.documentElement.scrollTop = st;
            }, 16.66666)

            window.pageYOffset = 0
        }
    </script>
</body>

</html>