scroll回到顶部

最新推荐文章于 2022-10-24 11:38:12 发布

吴机智

最新推荐文章于 2022-10-24 11:38:12 发布

阅读量251

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108503177

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <style>
        button{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body style="height: 2000px;">
    <button>显示</button>
    <script>
        // 当页面滚动了500像素的时候, 让button显示出来
        // 点击button回到顶部
        var btn = document.getElementsByTagName('button')[0];
        window.onscroll = function(){
            console.log(document.documentElement.scrollTop);
            if(document.documentElement.scrollTop >= 500){
                // button显示出来
                btn.style.display = 'block';
            } else {
                btn.style.display = 'none';
            }
        }
        // 点击button回到顶部
        btn.onclick = function(){
            // 滚动距离变成0
            document.documentElement.scrollTop = 0;
        }
    </script>
</body>
</html>