zoukankan      html  css  js  c++  java
  • JQ 滚动条监听事件

    1、当前滚动的地方的窗口顶端到整个页面顶端的距离:

            var winPos = $(window).scrollTop();

    2、获取指定元素的页面位置:

            $(val).offset().top;

    3、对页面滚动条滚动的监听:要放在页面加载的时候

          $(window).scroll(function(event){

        });

    4、设置滚动条到指定位置。$(window).scrollTop(offset)。

    以下内容转载自http://www.jb51.net/article/59965.htm

    本文实例讲述了jQuery中scrollTop()方法用法。分享给大家供大家参考。具体分析如下:

    语法结构一:

    当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部的偏移量

    $(selector).scrollTop()
    

      实例代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                border:1px solid black;
                200px;
                height:200px;
                overflow:auto
            }
            #div2{height:250px;}
            #div3{
                height:48px;
                30px;
                border:1px solid red;
            }
        </style>
    
    </head>
    <body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
    <button>获得offset值</button>
    
    <script src="dist/js/jquery-1.11.3.js"></script>
    <script>
    
        $(document).ready(function(){
            $("button").click(function(){
                alert($("#div1").scrollTop()+" px");
            });
        });
        
    
    </script>
    </body>
    </html>

    语法结构二:

    当scrollTop()方法带有参数的时候置垂直滚动条顶部偏移为该值。

    $(selector).scrollTop(val)

    参数列表:

    参数 描述
    val 设定垂直滚动条值
      JS部分的代码如下,Html与CSS同上:
     
     $(document).ready(function(){
            $("button").click(function(){
                $("#div1").scrollTop(30);
            })
        })
    

      实现的效果为点击按钮后,垂直滚动条自动滚动到其顶部距离窗口上端的30px的位置。

     
  • 相关阅读:
    screenonclick类
    凶残
    接近毁灭的状态
    在python3中,items()进行了优化
    python中两个字典(dict)合并
    Python代码中os.path常见属性的相关介绍 from 路人甲
    什么是pyc文件
    wget
    Python的字典的items(), keys(), values()
    利用securecrt在linux与windows之间传输文件
  • 原文地址:https://www.cnblogs.com/potato-lee/p/6169121.html
Copyright © 2011-2022 走看看