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

    小记。。。

  • 相关阅读:
    软件工程(2018)第一次作业
    SQA计划
    再冲刺
    第三次冲刺
    第二次冲刺
    小组第一次冲刺
    团队合作初体验
    关于git的认识与想法
    我的第一篇博客
    SQA计划和系统测试规程
  • 原文地址:https://www.cnblogs.com/LJP-JumpAndFly/p/4138459.html
Copyright © 2020-2023  润新知