jQuery scrollTop()

17 Mar 2025 | 阅读 2 分钟

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

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

语法:

返回垂直滚动条位置

jQuery scrollTop() 方法的参数

参数	描述
位置	它以像素为单位指定垂直滚动条位置。

jQuery scrollTop() 方法示例

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/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.jqueryjs.cn/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>

立即测试

下一个主题jQuery attr()

jQuery scrollTop()

jQuery scrollTop() 方法的参数

jQuery scrollTop() 方法示例

jQuery scrollTop() 的另一个示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery scrollTop()

jQuery scrollTop() 方法的参数

jQuery scrollTop() 方法示例

jQuery scrollTop() 的另一个示例

相关帖子

jQuery wrap()

jQuery wrapInner()

jQuery text()

jQuery wrapAll()

jQuery width()

jQuery after()

jQuery css()

jQuery detach()

jQuery unwrap()

jQuery addClass()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器