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.