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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。