zoukankan      html  css  js  c++  java
  • 原生态js回顶部

    <!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>

    效果如图:

    备注解释:
    function goTopEx() { //函数名goToEx
        var obj = document.getElementById("goTopBtn"); //获取id为goTopBtn的元素
        function getScrollTop() { //函数名为getScrollTop
            return document.documentElement.scrollTop; //返回document.documentElement(html)的滚动条的高度
        }
    
        function setScrollTop(value) { //函数名为setScrollTop,形参为value
            document.documentElement.scrollTop = value; //设置document.documentElement(html)的滚动条的高度为value
        }
        window.onscroll = function() { getScrollTop() > 0 ? obj.style.display = "" : obj.style.display = "none"; }; //当移动鼠标的时候,如果document.documentElement(html)的滚动条的高度>0,则obj显示,否则隐藏掉
        obj.onclick = function() { //点击obj
            var goTop = setInterval(scrollMove, 10); //每隔10毫秒发生scroolMove方法
            function scrollMove() { //函数名为scrollMove
                setScrollTop(getScrollTop() / 1.1); //设置document.documentElement(html)的滚动条的高度为getScrollTop()/1.1
                if (getScrollTop() < 1) clearInterval(goTop); //如果得到document.documentElement(html)的滚动条的高度<1,则清除掉scroolMove方法
            }
        };
    }
  • 相关阅读:
    年终总结 2016-08-28 22:04 422人阅读 评论(26) 收藏
    [mysql]MySQL Daemon failed to start 2016-08-14 21:27 1121人阅读 评论(18) 收藏
    solrr初步了解 2016-07-31 22:29 380人阅读 评论(4) 收藏
    基于spring-boot的测试桩设计--几种常见的controller
    利用Factory-boy和sqlalchemy来批量生成数据库表数据
    job中shell脚本异常(删除不存在容器),导致job被打断执行的问题 脚本优化方法
    利用Factory-boy来生成实例数据
    pytest相关资源收集
    pytest 用 @pytest.mark.usefixtures("fixtureName")装饰类,可以让执行每个case前,都执行一遍指定的fixture
    pytest fixture 利用 params参数实现用例集合
  • 原文地址:https://www.cnblogs.com/huanghuali/p/6489310.html
Copyright © 2011-2022 走看看