[jQuery].scrollTop() 函數詳解


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

 

 


免責聲明!

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



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