原生js实现缓动回到顶部

最新推荐文章于 2022-07-05 09:18:22 发布

岁月如歌_

最新推荐文章于 2022-07-05 09:18:22 发布

阅读量2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/namechenfl/article/details/81380566

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            position: relative;
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 4000px;
            background: green;
        }

        #btn {
            width: 50px;
            height: 50px;
            background: red;
            position: fixed;
            bottom: 10px;
            right: 10px;
            cursor: pointer;
            display: none;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <div id="btn">返回顶部</div>
</body>
<script>
    window.onload = function () {
        var box = document.getElementById("box")  ;
        var btn = document.getElementById("btn");  
        var timer = null;
        window.onscroll = function () {
            var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollheight = document.body.scrollHeight; //页高

            if (scroll_top < 300) {
                btn.style.display = "none"
            } else {
                btn.style.display = "block"
            }
        }
        btn.onclick = function () {
            var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollheight = document.body.scrollHeight; //页高
            console.log(11111111)
            clearInterval(timer)
            if (scroll_top > 0) {
                timer = setInterval(function () {
                    var speed = (0 - scroll_top) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
                    scroll_top = scroll_top + speed;  
                    console.log(scroll_top)
                    document.documentElement.scrollTop = scroll_top;
                    if (scroll_top <= 0) {
                        clearInterval(timer)
                        alert("结束了")
                    }
                }, 30)
            }
        }
    }
</script>


</html>

岁月如歌_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
原生js实现缓动回到顶部

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;body{position: relative;margin: 0;padding: 0;}#box{width: 200px;hei
复制链接

扫一扫