JavaScript案例之网页右侧返回顶部按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15971099/article/details/127235124

JavaScript案例之网页右侧返回顶部按钮

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .content{
            height: 2000px;
        }
        .goTop{
            width: 100px;
            height: 100px;
            background-color: #bbb;
            text-align: center;
            line-height: 100px;
            position:fixed;
            bottom:100px;
            right: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="goTop">返回</div>
    </div>

    <script>
        // 逻辑：1.当用户滑动滚动条 到达400px，返回按钮显示，反之小于400时 隐藏
        // 2.点击 返回按钮 时 滚动条恢复原位   
        // 让谁进行滚动 body  html
        let goTop = document.getElementsByClassName('goTop')[0];
        window.onscroll = function(){
            let res = document.body.scrollTop || document.documentElement.scrollTop;
            // console.log(res);
            if(res >=400){
                goTop.style.display = 'block';
            }else{
                goTop.style.display = 'none';
            }
        }
        goTop.onclick = function(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }

    </script>
</body>
</html>

效果图：

在这里插入图片描述