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 | 設定垂直滾動條值 |
$(document).ready(function(){
$("button").click(function(){
$("#div1").scrollTop(30);
})
})
實現的效果為點擊按鈕后,垂直滾動條自動滾動到其頂部距離窗口上端的30px的位置。
