jQuery CSS 操作 - scrollTop() 方法

野性酷女 2021-06-26 16:06 420阅读 0赞

## jQuery `CSS` 操作函数 ##

下面列出的这些方法设置或返回元素的 CSS 相关属性。

<table> 
 <thead> 
  <tr> 
   <th align="left">CSS 属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">css()</td> 
   <td align="left">设置或返回匹配元素的样式属性。</td> 
  </tr> 
  <tr> 
   <td align="left">height()</td> 
   <td align="left">设置或返回匹配元素的高度。</td> 
  </tr> 
  <tr> 
   <td align="left">offset()</td> 
   <td align="left">返回第一个匹配元素相对于文档的位置。</td> 
  </tr> 
  <tr> 
   <td align="left">offsetParent()</td> 
   <td align="left">返回最近的定位祖先元素。</td> 
  </tr> 
  <tr> 
   <td align="left">position()</td> 
   <td align="left">返回第一个匹配元素相对于父元素的位置。</td> 
  </tr> 
  <tr> 
   <td align="left">scrollLeft()</td> 
   <td align="left">设置或返回匹配元素相对滚动条左侧的偏移。</td> 
  </tr> 
  <tr> 
   <td align="left">scrollTop()</td> 
   <td align="left">设置或返回匹配元素相对滚动条顶部的偏移。</td> 
  </tr> 
  <tr> 
   <td align="left">width()</td> 
   <td align="left">设置或返回匹配元素的宽度。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 实例 ##

设置 `<div>` 元素中滚动条的垂直偏移：

$(".btn1").click(function(){ 
      $("div").scrollLeft(100);
    });

## 定义和用法 ##

`scrollTop()` 方法返回或设置匹配元素的滚动条的垂直位置。

`scroll top offset` 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

**语法**

$(selector).scrollTop(offset)

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">offset</td> 
   <td align="left">可选。规定相对滚动条顶部的偏移，以像素计。</td> 
  </tr> 
 </tbody> 
</table>

## 提示和注释 ##

注释：该方法对于可见元素和不可见元素均有效。

注释：当用于获取值时，该方法只返回第一个匹配元素的 `scroll top offset`。

注释：当用于设置值时，该方法设置所有匹配元素的 `scroll top offset`。

**使用 `scrollTop()` 方法获得当前的`scroll top offset`。**

<html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ alert($("div").scrollTop()+" px"); }); }); </script>
    </head>
    <body>
    <div style="border:1px solid black;width:200px;height:200px;overflow:auto">
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    </div>
    <button class="btn1">获得 scrollbar top offset</button>
    <p>试着移动滚动条，然后再次点击按钮。</p>
    </body>
    </html>