Smooth Scroll o desplazamiento dentro de la página

smooth scroll

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.

¡Compartir mola!Share on Facebook0Share on Google+0Share on LinkedIn0Tweet about this on TwitterBuffer this pageEmail this to someone

4 comentarios sobre “Smooth Scroll o desplazamiento dentro de la página

  1. Muchas gracias, estoy iniciando en el desarrollo frontend y deseaba realizar este efecto. En tu web he encontrado la solución. Gracias por compartir tu conocimiento.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *