---
title: Element.scrollTop
slug: Web/API/Element/scrollTop
tags:
  - API
  - Property
  - Scroll
  - scrollTop
translation_of: Web/API/Element/scrollTop
---
<p>{{ APIRef("DOM") }}</p>

<p><code><strong>Element.scrollTop</strong></code> 属性可以获取或设置一个元素的内容垂直滚动的像素数。</p>

<p>一个元素的 <code>scrollTop</code> 值是这个元素的<strong>内容顶部</strong>（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 <code>scrollTop</code> 值为<code>0</code>。</p>

<div class="blockIndicator warning">
<p>在使用显示比例缩放的系统上，<code>scrollTop</code>可能会提供一个小数。</p>
</div>

<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2>

<pre class="eval">// 获得滚动的像素数
var <var> intElemScrollTop</var> = someElement.scrollTop;
</pre>

<p>运行此代码后， <code><var>intElemScrollTop</var></code> 是一个整数，即{{domxref("element")}}的内容向上滚动的像素数。</p>

<pre class="eval">// 设置滚动的距离
<var>element</var>.scrollTop = <var>intValue</var>;
</pre>

<p><code>scrollTop</code> 可以被设置为任何整数值，同时注意：</p>

<ul>
 <li>如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"<strong>non-scrollable"</strong>属性）， <code>scrollTop</code>将被设置为<code>0</code>。</li>
 <li>设置<code>scrollTop</code>的值小于0，<code>scrollTop</code> 被设为<code>0</code></li>
 <li>如果设置了超出这个容器可滚动的值, <code>scrollTop</code> 会被设为最大值。</li>
</ul>

<h2 id="Example" name="Example">例子</h2>

<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
</div>
<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
   <td>{{Spec2("CSSOM View")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<p>{{Compat("api.Element.scrollTop")}}</p>

<h2 id="参考">参考</h2>

<ul>
 <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
 <li>{{domxref("Element.scrollLeft")}}</li>
 <li>{{domxref("Element.scrollTo()")}}</li>
</ul>