点击置顶

最新推荐文章于 2023-01-19 16:02:48 发布

~嘘~禁止想象~

最新推荐文章于 2023-01-19 16:02:48 发布

阅读量167

点赞数 1

分类专栏： # JavaScript小练习前端

本文链接：https://blog.csdn.net/weixin_45773503/article/details/113326546

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript小练习

36 篇文章 1 订阅

订阅专栏

应用场景：当页面在下滑时右下角会有一个返回顶部，一点击会返回顶部

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        button {
            width: 300px;
            height: 60px;
            font-size: 30px;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }
    </style>
</head>

<body>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, maiores. Dolorum rem itaque natus, alias ratione voluptas quo placeat eaque perspiciatis laboriosam inventore. Nam eius atque esse. At, dolor aut!
    <button>返回顶部</button>

    <script>
        function win(attr, value) {
            if (typeof value == 'undefined') {
                return document.documentElement[attr] || document.body[attr];
            }
            document.documentElement[attr] = value;
            document.body[attr] = value;
        }
    </script>

    <script>
        var body = document.querySelector('body');
        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {
            var top = timer = null;
            timer = setInterval(function() {
                top = document.documentElement['scrollTop'];
                win("scrollTop", Math.floor(top - top / 30));
                if (top == 0) {
                    clearInterval(timer);
                }
            }, 10);
        })

        window.onload = window.onscroll = function() {
            var nowTop = win("scrollTop");
            btn.style.display = nowTop < 200 ? "none" : "block";
        }
    </script>

</body>

</html>