实现页面返回顶部

最新推荐文章于 2024-06-28 16:20:01 发布

浪漫季

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量664

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/lishunyu1226/article/details/128720296

版权

页面返回顶部

内容
原理
代码

内容

点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面的右下方。

原理

js直接给页面根节点设置scrollTop为0。

document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

代码

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        #myBtn {

            display: none;

            position: fixed;

            bottom: 20px;

            right: 30px;

            z-index: 99;

            border: none;

            outline: none;

            background-color: black;

            color:white;

            cursor: pointer;

            padding: 15px;

            border-radius: 10px;

        }
        #myBtn:hover {

            background-color:black;

        }
    </style>
</head>
<body>
    <button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
    <div style="background-color:lightgrey;padding:80px 30px 2500px"></div>
    <script>
        // 当网页向下滑动 20px 出现"返回顶部" 按钮
        window.onscroll = function () { scrollFunction() };
        function scrollFunction() {
            console.log(121);
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("myBtn").style.display = "block";
            } else {
                document.getElementById("myBtn").style.display = "none";
            }
        }
        // 点击按钮，返回顶部
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
</body>
</html>