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

<p>La propiedad <code><strong>Element.scrollTop</strong></code> obtiene o establece el número de pixels que el contenido de un elemento ha sido desplazado (enrollado) hacia arriba. El <code>scrollTop</code> de un elemento es una medida de la distancia desde el límite superior de un elemento al límite superior de su contenido visible. Cuando un elemento no genera una barra de scroll vertical, el valor de su <code>scrollTop</code> es establecido por defecto a <code>0</code>.</p>

<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2>

<pre class="brush: js">// Obtiene el número de pixels desplazados
var <var> intElemScrollTop</var> = someElement.scrollTop;
</pre>

<p><var>Después de ejecutar este código, </var><code><var>intElemScrollTop</var></code> es un entero que corresponde al número de pixesl que el contenido del {{domxref("element")}} ha sido desplazado hacia arriba.</p>

<pre class="brush: js">// Establece el número de pixels desplazados
<var>element</var>.scrollTop = <var>intValue</var>;
</pre>

<p><code>scrollTop</code> puede ser establecido a cualquier valor entero, con ciertas salvedades:</p>

<ul>
 <li>Si el elemento no puede ser desplazado (p.e. no tiene desbordamiento (overflow) o si el elemento no es desplazable (<strong>non-scrollable</strong>), <code>scrollTop</code> es establecido a <code>0</code>.</li>
 <li>Si se asigna un valor menor que <code>0</code>, <code>scrollTop</code> es establecido a <code>0</code>.</li>
 <li>Si se asigna un valor mayor que el máximo al que el contenido puede ser desplazado, <code>scrollTop</code> es establecido al valor máximo.</li>
</ul>

<h2 id="Example" name="Example">Ejemplo</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>

<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Observaciones</th>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
   <td>{{Spec2("CSSOM View")}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Referencias">Referencias</h2>

<ul>
 <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">Borrador del Módulo Vista del W3C</a></li>
 <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">definición de scrollTop en MSDN</a></li>
 <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">Medidas de Dimensión y Ubicación de Elementos en MSDN</a></li>
</ul>