jQuery scrollTop()方法

jQuery scrollTop()方法用于设置或返回所选元素的垂直滚动条位置。当滚动条在顶部时，它指定位置为0。

返回位置： 当使用该方法返回位置时，它会提供集合中第一个匹配元素的当前垂直位置。
设置位置： 当使用该方法设置位置时，它会为所有匹配元素设置滚动条的垂直位置。

语法 :

返回垂直滚动条位置：

$(selector).scrollTop()

jQury scrollTop()方法的参数

参数	描述
位置	它指定了垂直滚动条的像素位置。

jQuery scrollTop()方法示例

让我们通过示例来演示jQuery scrollTop()方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
        alert($("div").scrollTop() + " px");
    });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:150px;height:100px;overflow:auto">
Twinkle, twinkle, little star,How I wonder what you are!
Up above the world so high, Like a diamond in the sky. 
Twinkle, twinkle, little star, How I wonder what you are!</div><br>
<button>Return the vertical position of the scrollbar</button>
<p>Move the scrollbar down and click the button again.</p>
</body>
</html>

另一个jQuery scrollTop()的示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop demo</title>
  <style>
  div.demo {
    background: #7fffd4 none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 150px;
    overflow: auto;
  }
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="demo"><h1>Welcome to:</h1><p>javatpoint.com</p></div>
<script>
$( "div.demo" ).scrollTop( 300 );
</script>
</body>
</html>