Este sitio web usa cookies para mejorar el servicio. Si continúa navegando entendemos que aceptas su uso.

Política de Privacidad

BLOG - DETALLES

Smooth Scroll con jQuery

Cómo realizar desplazamientos suaves entre diferentes partes de una página web con jQuery

Smooth Scroll con jQuery

Habrás observado como muchísimas webs en la actualidad ofrecen un efecto en su navegación dentro de una misma página del sitio que consiste en un desplazamiento suave de la barra de scroll para acceder a los contenidos disponibles a diferentes alturas de esta página. Algunos ejemplos muy claros los puedes ver en algunas páginas de F.A.Q. o, aún más claros, en muchos sitios actuales completamente diseñados mediante técnicas de Single-Page Application (SPA), normalmente AngularJS y Parallax.

En cualquier caso, vamos a ver cómo realizar este efecto de desplazamiento vertical suave, conocido como Smooth Scroll, como respuesta a la pulsación en un enlace en una página. Usaremos únicamente jQuery, un framework de JavaScript especializado en efectos visuales.

En primer lugar crearemos los dos elementos implicados en todo el proceso:

  1. El enlace o disparador del evento que al ser pulsado generará el desplazamiento deseado.
  2. El elemento o 'ancla' al que queremos que se desplace nuestra página cuando se pulse el enlace.

El disparador del evento no tiene que ser forzosamente un enlace; podría ser un <input type="button" /> o cualquier otro elemento sobre el que podamos pulsar. Lo de usar un enlace a un ancla es preferible porque facilita la navegación correcta incluso sin necesidad de JavaScript (eso sí, ahí ya nos podemos olvidar de desplazamientos, ni suaves ni de ningún tipo).

Bueno, a lo que ibamos...

<a id="disparador" href="#elemento">IR A ELEMENTO</a>

...

<section id="elemento">

    CONTENIDOS

</section>

A continuación descargamos la librería jQuery de la página oficial, creamos un documento para nuestro código JavaScript y enlazamos ambos en el HEAD de nuestro documento:

<head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="scripts.js"></script>

</head>

A continuación creamos el código necesario: se trata de que al pulsar el disparador nuestro script localice en el documento el elemento que deseamos ver y automáticamente el scroll de nuestra ventana se desplace hasta dejar el elemento deseado visible en la parte superior de la ventana del navegador.

$(document).ready(function() {

    $("#disparador").click(function(e) {
        $('html, body').animate({scrollTop: $('#elemento').offset().top + 'px'},1000,'swing');
    });

});

La función scrollTop() de jQuery nos permite capturar o establecer la posición de la barra de scroll vertical del elemento seleccionado, en este caso nuestro propio documento HTML. La función offset() nos devuelve o establece las coordenadas de un elemento, de forma relativa al documento.

Vamos a intentar aclarar este código para poder manipularlo luego a nuestro gusto:

  • Al hacer 'click' en el elemento con id 'elemento', capturamos la posición de éste y hacemos que la barra de scroll de nuestro documento se desplace tanto verticalmente como distancia haya entre la parte superior de nuestro documento y el elemento seleccionado.
  • Para que este desplazamiento se produzca de forma animada usamos la función animate(), que nos permite establecer una animación entre dos estados diferentes de la misma propiedad CSS.

Para ver un ejemplo claro del funcionamiento de este efecto puedes hacerlo en nuestra sección de DISEÑO Y DESARROLLO WEB, pulsando el enlace 'VER ALGUNOS DE NUESTROS TRABAJOS'.

Si necesitais alguna aclaración o algo no ha quedado claro, dejadnos un comentario y estaremos encantados de ayudaros en lo que necesiteis.

Comentarios del Artículo

COMENTAR

No hay comentarios para este artículo en este momento

Debes estar logueado para poder dejar un comentario.