首页 > 代码库 > 原生态js回顶部

原生态js回顶部

2024-09-06 14:07:53   215人阅读

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    .public_gotop {
        background-color: #858585;
        position: fixed;
        right: 2rem;
        bottom: 6rem;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABN0lEQVRYhe3Uuy4FURjFcZEjiMu76FwLiWuLhJJ4FU+gFwqNa1SuHQmtzhNoJRxB3H4Kc+LLGJdzDI1Z3cxe3/qvvfdk6uoKFSpUqEahFetYRtNfw9tx4k2HaPkreBuOvdcBmn8b3pyAKrrCTXjeQsNvwVtxFGAX6EAPyuH9bu7fRMbOL9EZ1ntTJbbRmBe8CfupY+/K8A2krmPzx9eRwPdS8O5P/IO4Df4NlGqFN2InhJXR+425oVSJtapLJPDtEHKNvirmR3AX5le+XQINydFVdIOBqnbwmjOaKrGE+q+GSl5/rxXdYqhaeMgbw33IW/ywRAJfTcGHa4WH3HE8hNyFzBKYD6YHTPwUHrKn8RTy57JM58niIybzgof8WTwnjLMsQz9OMZU3PDBmEkbn1+5ChQr9F70Ae6lHrD/JbEkAAAAASUVORK5CYII=);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 60%;
        display: none;
    }
    </style>
</head>

<body>
    <div style="height: 500px; background: #E1A0F3"></div>
    <div style="height: 500px; background: #CE77B5"></div>
    <div class="public_gotop" id="gotop"></div>
    <script type="text/javascript">
    window.onload = function() {
        // 返回顶部
        var goTopEx = function() {
            var gtObj = document.getElementById("gotop");

            function getScrollTop() {
                return document.documentElement.scrollTop || document.body.scrollTop;
            }

            function setScrollTop(value) {
                document.documentElement.scrollTop = value;
                document.body.scrollTop = value;
            }
            window.onscroll = function() {
                getScrollTop() > 80 ? gtObj.style.display = "block" : gtObj.style.display = "none";
            }
            gtObj.onclick = function() {
                var goTop = setInterval(scrollMove, 10);

                function scrollMove() {
                    setScrollTop(getScrollTop() / 1.1);
                    if (getScrollTop() < 1) clearInterval(goTop);
                }
            }
        }()
    }
    </script>
</body>

</html>

 

效果如图：

技术分享

 

原生态js回顶部


联系
我们