jQuery scrollTop(): Obtener y establecer la posición vertical del scroll

Nuevo post para repasar la función de jQuery scrollTop(), su funcionalidad es la de obtener o establecer la posición vertical del scroll dentro de un elemento o div.

Para establecer u obtener la posición horizontal tenemos que usar scrollLeft(). Otros post de jQuery interesantes son:

• append()
• each()
• position() y offset()
• height() y width()
• blur() y focus()
• Obtener y establecer la posición vertical y horizontal del scroll con jQuery

Sintaxis de jQuery scrollTop()

Veamos la sintaxis extraída de su web oficial:

$(selector).scrollTop()

Con la sintaxis superior estaríamos obteniendo la posición vertical del scroll en un determindado elemento. Dicho elemento lo establecemos en el parámetro ‘selector‘.

$(selector).scrollTop(position)

Con esta otra sintaxis establecemos la posición vertical del scroll en el parámetro ‘position‘ dentro de un determinado elemento. Dicho elemento lo establecemos en el parámetro ‘selector‘.

Ejemplo de jQuery scrollTop()

Vayamos con este ejemplo de scrollTop() para obtener la posición vertical del scroll:

$(document).ready(function(){
   $("#boton").click(function(){
        alert("La barra vertical se ha movido " + $("#parrafo").scrollTop() + " pixels");
    });
});

Os explico el ejemplo superior, detectamos el click en el botón con id = botón, acto seguido mostramos un mensaje por pantalla con la función alert de Java Script. En dicho mensaje mostramos los píxeles que se ha desplazado desde la arriba el scroll/barra vertical.

En este nuevo ejemplo de scrollTop() vamos a establecer la posición vertical del scroll:

$(document).ready(function(){
   $("#boton").click(function(){
        $("#parrafo").scrollTop(50)
    });
});

Os explico el ejemplo superior, detectamos el click en el botón con id = botón, acto seguido movemos el scrollbar verticalmente 50 pixels.

El código HTML del párrafo es el siguiente:

<div id="parrafo" style="border:1px solid; width:300px;height:250px; overflow:auto">
 Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. Este es el texto del párrafo palabras unidas ParaGenerarScrollHorizontalYVerticalParaEstaDemoDeEjemplo. 
</div>