JQuery scrollTop()用法及代碼示例

scrollTop()方法是jQuery中的內置方法，用於返回滾動條的垂直頂部位置。

用法:

$(selector).scrollTop(position)

參數：此方法接受可選的單個參數位置。用於指定垂直滾動條的位置(以像素為單位)。

返回值：此方法返回滾動條的頂部位置。

下麵的示例說明了jQuery中的scrollTop()方法：

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>scrollTop method</title> 
        <script src= 
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
          
        <!-- jQuery code to show the working of this method -->
        <script> 
            $(document).ready(function() { 
                $("button").click(function() { 
                    alert($("div").scrollTop() + " px"); 
                }); 
            }); 
        </script> 
        <style> 
            div { 
                border: 1px solid black; 
                width: 100px; 
                height: 150px; 
                overflow: auto; 
            } 
        </style> 
    </head> 
    <body> 
        <div> 
            Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome 
            to GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to 
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to 
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to  
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to  
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to  
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to  
            GeeksforGeeks!. Welcome to GeeksforGeeks!</div> 
        <br> 
          
        <!-- move the scroll bar and click on this button -->
        <button>Click Here !</button> 
    </body> 
</html>

輸出：
在單擊按鈕之前：

上圖的最高位置像素值：

相關用法

注：本文由純淨天空篩選整理自kundankumarjha大神的英文原創作品 jQuery | scrollTop() with Examples。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。