jQuery – Movernos por la web hasta un objeto

Publicada el por

En ocasiones nos puede interesar movernos dentro de una web hasta la posición en la que está un objeto. jQuery permite hacerlo de forma sencilla y atractiva.

Supongamos que añadimos más contenidos con la función append() de jquery, o estamos en la parte inferior de la página y queremos añadir un botón para subir… Son ejemplos de desplazarnos por la web hasta donde haya un objeto.

Objeto donde nos desplazaremos (destino)

Primero debemos crear el objeto donde nos desplazaremos, estemos donde estemos de la página:

<div id="marca-inicio"><h1>Título de la página</h1></div>

Fijaos que he creado un bloque div con id marca-inicio. Esto será importante para identificar al objeto. Estará al inicio de la página.

Botón que hace que nos desplacemos

<button id="btn-volver-inicio">Volver a inicio</button>

Creamos un botón en la parte inferior de la página, y lo identificamos con btn-volver-inicio. Atentos, que ahora vamos a por el código que activa este botón y nos desplaza hacia el objeto destino.

jQuery scrollTop

[...]
$("#btn-volver-inicio").on("click", function(){
    var posicion = $("#marca-inicio").offset().top;
    $("html, body").animate({
        scrollTop: posicion
    }, 3000); 
});
[...]

Si os fijáis, los pasos que hemos seguido en este código es:

  • Capturar evento click del botón
  • Calculamos la posición de #marca-inicio
  • Una vez sabemos la posición, hacemos un scrollTop con animación de 3 segundos. (Nos movemos hacia la posición que hemos calculado anterioremente).

Espero que este pequeño ejemplo os sea de utilidad para movernos por una web hasta la posición de un objeto utilizando jQuery.

Más información