jquery实现回到顶部效果

css:

<style>
        div {
            width: 100%;
            height: 500px;
            margin: 10px;
        }

        button {
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, 0.3);
            position: fixed;
            right: 50px;
            bottom: 50px;
            font-size: 36px;
            line-height: 100px;
            text-align: center;
            color: #fff;
            outline: none;
            border: none;
            display: none;
        }
    </style>

html:

 <div style="background: red;"></div>
    <div style="background: purple;"></div>
    <div style="background: paleturquoise;"></div>
    <div style="background: orange;"></div>
    <button>top</button>

javascript:

//jquery官网：https://www.bootcdn.cn/jquery/
<script src="./js/jquery.js"></script>
    <script>
        //   当页面滚动距离 >= 500 显示
        $(window).scroll(function () {
            if ($(window).scrollTop() >= 500){
                $('button').show();
            }else{
                $('button').hide();
            }
        });
        // 点击按钮 回到页面顶部
        $('button').click(function () {  
            $('html,body').animate({'scrollTop':0})
        });
    </script>

效果：