Enlaces tipo ancla con desplazamiento animado con jQuery

Los enlaces tipo ancla son aquellos enlaces que nos llevan dentro del mismo documento (página o sección de nuestra Web) a un punto concreto, facilitando al usuario llegar a dicha información sin necesidad de recorrer todo el documento haciendo scroll, por ejemplo, un artículo con varios capítulos o ítems. Incluyendo un índice compuesto por anclas, podremos mejorar la experiencia del usuario.

Para agregar un enlace anclado, tan solo debemos indicar en href el selector ID único (#) del elemento de nuestra página dónde queramos que nos lleve nuestro enlace. Por ejemplo:

<a href="#capitulo1">Capítulo 1</a>

Al hacer clic sobre el enlace nos llevará hasta nuestro elemento cuyo ID es #capitulo1.

Además, con jQuery podemos añadir una transición o efecto de movimiento, evitando un salto brusco al pinchar sobre nuestro enlace de ancla.

Añadimos la llamada a la librería jQuery.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Y añadimos el siguiente Script con el cuál crearemos nuestra animación o desplazamiento:

<script>
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 800);
return false;
}
}
});
});
</script>

Para controlar la velocidad, basta con modificar el valor (800) de esta línea del Script:

$('html,body').animate({scrollTop: targetOffset}, 800);

Puedes descargar un ejemplo hacienda clic en el siguiente enlace. Descargar ejemplo.

No hay comentarios:

Publicar un comentario

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?