JQuery点击箭头跳到顶部

转：https://blog.csdn.net/hahanishia/article/details/110357117

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq 回顶</title>
        <script></script>
        <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                height: 2000px;
                background-color: #f2f2f2;
            }

            #scrollUp {
                position: fixed;
                z-index: 111;
                background-color: #777;
                text-decoration: none;
                top: 80%;
                right: 2%;
                overflow: hidden;
                width: 46px;
                height: 46px;
                opacity: .8;
                display: none;
                cursor: pointer;
            }

            #scrollUp:hover {
                background-color: black;
                opacity: .6;
            }

            #scrollUp>div {
                width: 20px;
                height: 20px;
                border-top: 3px solid white;
                border-right: 3px solid white;
                transform: rotate(-45deg);
                position: relative;
                left: 12px;
                top: 18px;
            }
        </style>
    </head>
    <body>
        <div id="scrollUp">
            <div></div>
        </div>

        <script type="text/javascript">
            $(function() {
                gotop();
                $('#scrollUp').click(function() {
                    $('html,body').animate({
                        scrollTop: '0px'
                    }, 1000); /* 回顶时间1s */
                });
            });

            function gotop() {
                $(window).scroll(function() {
                    var $scrollTop = document.documentElement.scrollTop;
                    /* 右侧滚动条距离顶部大于500px，回顶方块显示，反之隐藏 */
                    if ($scrollTop > 500) {
                        $("#scrollUp").show();
                    } else {
                        $("#scrollUp").hide();
                    }
                });
            }
        </script>
    </body>
</html>