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的位置。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM