scrollTop()函數用於設置或返回當前匹配元素相對於垂直滾動條頂部的偏移。
當一個元素的實際高度超過其顯示區域的高度時,在一定的設置下,瀏覽器會為該元素顯示相應的垂直滾動條。此時,scrollTop()返回的就是該元素在可見區域之上被隱藏部分的高度(單位:像素)。
如果垂直滾動條在最上面(也就是可見區域之上沒有被隱藏的內容),或者當前元素是不可垂直滾動的,那么scrollTop()將返回0。
該函數屬於jQuery對象(實例),並且對可見的和隱藏的元素均有效。
語法
jQuery 1.2.6 新增該函數。
jQueryObject.scrollTop( [ value ] )
注意:
1、如果省略了value參數,則表示返回偏移值;如果指定了該參數,則表示設置偏移值。
2、scrollTop()函數的"設置"操作針對的是當前jQuery對象所匹配的每一個元素;"讀取"操作只針對第一個匹配的元素。
參數
| 參數 | 描述 |
|---|---|
| value | 可選/Number類型用於設置的偏移值。 |
返回值
scrollTop()函數的返回值為Number/jQuery類型,返回值的類型取決於scrollTop()函數當前執行的是"設置"操作還是"讀取"操作。
如果scrollTop()函數執行的是"設置"操作,則返回當前jQuery對象本身;如果是"讀取"操作,則返回第一個匹配元素相對於垂直滾動條頂部的偏移。
如果當前jQuery對象匹配多個元素,返回坐標時,scrollTop()函數只以其中第一個匹配的元素為准。如果沒有匹配的元素,則返回null。
示例&說明
以下面這段HTML代碼為例:
<div id="content" style="width:200px; height: 200px; overflow:auto;">
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
CodePlayer<br>
專注於編程開發技術分享<br>
</div>
<input id="btn" type="button" value="點擊" >
<div id="msg"></div>
以下jQuery示例代碼用於演示scrollTop()函數的具體用法:
var $content = $("#content");
var $btn = $("#btn");
var $msg = $("#msg");
$btn.click( function(){
$msg.html ( "content的scrollTop:" + $content.scrollTop() );
} );
// 設置顯示區域之前隱藏119px高度的content的內容
$content.scrollTop( 119 );
此時,我們在顯示頁面上點擊按鈕,即可看到如下效果(我們平常看到的瀏覽器滾動條也可以視作<body>元素的實際高度超出顯示區域的高度,從而出現該滾動條):

此文轉自:http://www.365mini.com/page/jquery-scrolltop.htm
