Scroll suave con jQuery

En este tutorial vamos a ver cómo puedes crear un efecto de scroll suave con jQuery. Estableceremos una serie de puntos ancla que enlazarán a sus correspondiente de elementos dentro de la misma página. Al hacer clic en los puntos ancla, el navegador hará scroll de forma suave y automática hasta llegar a dichos elementos.

Usaremos jQuery. Si nunca lo has usado, también puedes consultar el tutorial de introducción a jQuery, aunque no es indispensable.

Lo primero, debes definir tanto los puntos ancla como aquellos a los que hacen referencia, dando por hecho que están distribuidos a lo largo del documento:

<a href="#uno">Ir al primer elemento</a>
<a href="#dos">Ir al segundo elemento</a>

<div id="uno">First Element</div>

<div id="dos">Second Element</a>

A continuación debes agregar la siguiente función jQuery, que se activará cada vez que hagas clic en un punto ancla:

$("a[href^='#']").click(function(event) {
  event.preventDefault();
	
  var posicion = $($(this).attr("href")).offset().top;

  $("body, html").animate({
    scrollTop: posicion
  });
});

Esta función detecta cualquier clic en un punto ancla. Por defecto, el enlace saltaría automáticamente hasta el elemento al que apunta, así que usamos el método event.preventDefault() para eliminar su comportamiento por defecto, tal y como se explica aquí.

Seguidamente, obtenemos la posición del elemento al que apunta y luego iniciamos una animación hasta dicho elemento.

Si quieres, puedes ver este ejemplo en funcionamiento aquí.

Y esto ha sido todo.

---