zoukankan      html  css  js  c++  java
  • 关于如何使用javascript监听滚动条滚动事件

    在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它

    Html代码:

    <a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>

    Css代码:

    #scrollup{
        background: #777;
        color:#eee;
        font-size: 40px;
        text-align: center;
        text-decoration: none;
        bottom:65px;
        right:20px;
        overflow: hidden;
        width:46px;
        height:46px;
        border:none;
    }

    以上就是箭头所指按钮的样式啦,接下是实现滚动条监听事件~

    javascript代码:

    <script type="text/javascript">
      window.onscroll= function(){
         //变量t是滚动条滚动时,距离顶部的距离
           var t = document.documentElement.scrollTop||document.body.scrollTop;
           var scrollup = document.getElementById('scrollup');
           //当滚动到距离顶部200px时,返回顶部的锚点显示
           if(t>=200){
               scrollup.style.display="block";
           }else{          //恢复正常
               scrollup.style.display="none";
           }
        }
    </script>
  • 相关阅读:
    Python与mongo交互
    MongoDB数据库操作
    爬虫之xpath解析库
    selenium常用操作
    无头浏览器的使用
    BeautifulSoup库使用
    urllib简单介绍
    爬虫自动化工具防检测
    支付宝支付
    TortoiseSVN使用教程[多图超详细]
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/8269282.html
Copyright © 2011-2022 走看看