Smooth Scroll o desplazamiento dentro de la página

Este pequeño código es la vía para conseguir el efecto de Smooth Scroll que permite desplazarse dentro de la misma página sin tener que recargarla como se hacía al utilizar las anclas y con un elegante efecto de deslizamiento cuya velocidad podemos controlar.

Primero el ancla

Algo tan sencillo como un enlace sin href, o puede ser también un botón, una imagen, a gusto del consumidor. Lo único obligatorio son los dos atributos que ha de llevar sí o sí para que el efecto funcione:

class=»ancla» y data-ancla=»id-del-destino»

<a class="ancla" data-ancla="solicita-informacion">Más información</a>

Segundo el destino

Allí donde nos dirigirá nuestra ancla cuyo, elemento cuyo atributo «id« tendrá el mismo valor que el atributo «data-ancla« del elemento utilizado como ancla.
<form id="solicita-informacion" action="" method="post">

Y ahora jQuery hace la magia del smooth scroll

El código jQuery que hace funcionar el Smooth Scroll es bastante sencillo

$('.ancla').on('click', function(e){
e.preventDefault();
var strAncla = '#' + $(this).data('ancla');
$('html,body').animate({scrollTop: $(strAncla).offset().top}, 2000);
});

Primero evitamos el comportamiento por defecto que tendría hacer click en el elemento con la clase «ancla«, en caso de tratarse de un enlace por ejemplo.

Después recogemos el valor del atributo «data-ancla» de dicho elemento puesto que este valor será el atributo «id» del elemento al cual lleva el ancla.

Y por último y más importante, hacemos que la página se deslice desde el ancla hasta su destino. Como decía al principio incluso podemos controlar la velocidad de ese deslizamiento cambiando el valor final de la función animate, ese 2000 es una cantidad expresada en milisegundos que podremos aumentar para que dure más el desplazamiento o reducir para que sea más rápido.

Ejemplos de uso para el Smooth Scroll pueden ser una llamada a la acción en una landing page que al hacer click nos desplace más abajo hasta un formulario de contacto o el botón de «Volver arriba» que encontramos en muchos blogs o páginas que se extienden en vertical.