案例——原生js返回顶部

最新推荐文章于 2024-06-10 22:52:06 发布

、小会

最新推荐文章于 2024-06-10 22:52:06 发布

阅读量84

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/gmh1118/article/details/113400239

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

原生JS实现返回顶部案例

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

<head>
    <meta charset="UTF-8">
    <title>返回顶部的案例</title>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
            -webkit-user-select: none;
        }
        
        html,
        body {
            width: 100%;
            height: 1000%;
        }
        
        #div1 {
            display: none;
            position: fixed;
            right: 10px;
            bottom: 10px;
            width: 100px;
            height: 50px;
            background: blue;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div id="div1">
        返回顶部
    </div>
    <script>
        //获取window下的元素属性
        function getWin(attr) {
            return document.documentElement[attr] || document.body[attr];
        }
        var ch = getWin("clientHeight"),
            oDiv = document.getElementById("div1");
        window.addEventListener("scroll", function() {
            var sT = getWin("scrollTop");
            if (sT >= ch) {
                oDiv.style.display = "block";
            } else {
                oDiv.style.display = "none";
            }
        });
        oDiv.addEventListener("click", move);

        function move() {
            oDiv.style.display = "none";
            window.clearTimeout(this.timer);
            oDiv.timer = null;
            document.documentElement.scrollTop -= 300;
            if ((document.documentElement.scrollTop - 300) <= 0) {
                document.documentElement.scrollTop = 0;
                return;
            }
            oDiv.timer = window.setTimeout(move, 10);
        }
    </script>
</body>

</html>

、小会

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例——原生js返回顶部

原生JS实现返回顶部案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>返回顶部的案例</title> <style> body, div { margin: 0; padding: 0; -webkit
复制链接

扫一扫