jquery返回顶部按钮（随滚动位置显示隐藏）

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/116307252

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery返回顶部按钮（含显示隐藏）</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        .cons {
            height: 150vh;
        }
        
        #goTop {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            padding: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            border-radius: 5%;
            border: 0.3px solid #999;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="cons">
        <div id="goTop">
            <div>返 回</div>
            <div>顶 部</div>
        </div>
    </div>
    <script>
        function init() {
            if ($(window).scrollTop() > 50) {
                $("#goTop").fadeIn(200);
            } else {
                $("#goTop").fadeOut(200);
            }
        }
        init();
        //  返回顶部按钮-显示隐藏
        $(window).scroll(function() {
            init();
        });
        //  点击返回顶部
        $("#goTop").click(function(e) {
            $("body,html").animate({
                scrollTop: 0
            }, 500)
            return false
        });
    </script>
</body>

</html>