回到顶部

最新推荐文章于 2022-01-03 02:45:44 发布

路人葵

最新推荐文章于 2022-01-03 02:45:44 发布

阅读量136

点赞数

分类专栏：前端 javascript 代码文章标签： javascript 浏览器回到顶部

本文链接：https://blog.csdn.net/weixin_41218855/article/details/90180298

版权

前端同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

javascript

16 篇文章 0 订阅

订阅专栏

代码

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #up {
            position: fixed;
            right: 10px;
            bottom: 100px;
            width: 40px;
            height: 40px;
            background: #ccc;
            cursor: pointer;
        }
        body {
            height: 2000px;
            background-color: #000;
        }
    </style>
    <script>
        window.onload = function () {
            var btn = $('up');
            btn.onclick = function () {
                document.documentElement.scrollTop = 0;  //这行代码和下一行代码的意思一样都是将浏览器的滚动条离上面的距离置为一，写两行是因为考虑了浏览器的兼容性
                document.body.scrollTop = 0;
            }
            function $(id) {
                 return document.getElementById(id);
            }
        }
    </script>
</head>
<body>
    <div id="up">回到顶部</div>
</body>
</html>