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;
            width:200px;
            height:200px;
            overflow:auto
        }
        #div2{height:250px;}
        #div3{
            height:48px;
            width: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的位置。

 

 
posted @ 2016-12-13 11:12  potato~e-e  阅读(24250)  评论(0)    收藏  举报