zoukankan      html  css  js  c++  java
  • js监听滚动条 回到顶端

    效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来;当滚动条回到顶部时,将回到顶端按钮隐藏。

        <script type="text/javascript">
         //获取滚动条的位置
            function getScrollTop() {
                var scrollPos;
                if (window.pageYOffset)
                {
                    scrollPos = window.pageYOffset;
                }
                else if (document.compatMode && document.compatMode != 'BackCompat')
                {
                    scrollPos = document.documentElement.scrollTop;
                }
                else if (document.body)
                {
                    scrollPos = document.body.scrollTop;
                }
                return scrollPos;
            }
    
            window.onscroll = function () {//监听滚动条
                if (getScrollTop() > 20) {//当滚动条离开顶端时,显示"回到顶部"。这里写20的原因是,"回到顶端"按钮也不是需要马上出现,根据自己的需求 而设置。
                    $("#top_div").show();
                }
                else {//当滚动条回到顶端时,将"回到顶端按钮"  隐藏
                    $("#top_div").hide();
                }
            }
        </script>
    
    <style type="text/css"> 
    #top_div{ 
         position: fixed; 
       right: 10px;
       bottom: 10%;
       50px;
       height: 50px;
       display: none;
    } </style>

    小记。。。

  • 相关阅读:
    无向图最小割Stoer-Wagner算法学习
    centos7下opencv的安装
    problems when installed mysql in linux ubuntu
    gcc内嵌汇编
    python第三方库镜像地址
    docker命令
    搭建小型web服务
    装饰器
    docker-influxdb
    shell基础命令
  • 原文地址:https://www.cnblogs.com/LJP-JumpAndFly/p/4138459.html
Copyright © 2011-2022 走看看