zoukankan      html  css  js  c++  java
  • js网页滚动条滚动事件实例分析

    这篇文章主要介绍了js网页滚动条滚动事件的用法,实例分析了javascript中window.onscroll监控滚动条滚动事件的相关技巧,需要的朋友可以参考下。

    本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下:

      在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll。当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示“返回面部"。

    js网页滚动条滚动事件一:利用点击事件;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>BOM的滚动条事件</title>
        </head>
        <style type="text/css">
            #top_div{ 
                position:fixed; 
                bottom:80px; 
                right:0; 
                display:none; 
            } 
        </style>
        <body style="height: 3000px;">
            <p>顶部</p> 
            <div id="top_div"><p>返回顶部</p></div> 
            <script>
                window.onscroll = function(){ 
             // document.documentElement.scrollTop用来兼容IE
    var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "top_div" ); if( t >= 300 ) { top_div.style.display = "inline"; top_div.onclick = function(){ window.scrollTo(0, 0); } } else { top_div.style.display = "none"; } } </script> </body> </html>

    js网页滚动条滚动事件二:利用锚链接:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>BOM的滚动条事件</title>
        </head>
        <style type="text/css">
            #top_div{ 
                position:fixed; 
                bottom:80px; 
                right:0; 
                display:none; 
            } 
        </style>
        <body style="height: 3000px;">
            <a name="top">顶部<a> 
            <div id="top_div"><a href="#top">返回顶部</a></div> 
            <script>
                window.onscroll = function(){ 
             // document.documentElement.scrollTop用来兼容IE
    var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "top_div" ); if( t >= 300 ) { top_div.style.display = "inline"; } else { top_div.style.display = "none"; } } </script> </body> </html>

    例子语法解释:

      在 style 标签中首先定义 top_div css 属性:position:fixed;display:none; 是关键javascript 语句中,t 得到滚动条向下滚动的位置,|| 是为了更好兼容性考虑当滚动超过300 (像素)时,将 top_div css display 属性设置为显示(inline),反之则隐藏(none)必须设定 DOCTYPE 类型,在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度。

  • 相关阅读:
    windows10使用记录
    DevOps理论与实践总结
    工资调整
    Node程序debug小记
    基于游标的分页接口实现
    util.promisify 的那些事儿
    如何编写 Typescript 声明文件
    async语法升级踩坑小记
    使用TS+Sequelize实现更简洁的CRUD
    使用 TypeScript 改造构建工具及测试用例
  • 原文地址:https://www.cnblogs.com/tanxiang6690/p/6839800.html
Copyright © 2011-2022 走看看