Anclas con efecto slide con jQuery

En este artículo vamos  a ver como crear un menú de anclas con efecto slide empleando para ello jQuery.

Crear un link con una ancla es muy sencillo, tan solo tienes que añadir un link hacia un identificador de la siguiente forma:

<a href="#titulo1">Titulo 1</a>

Al hacer click en este link iremos directamente a donde esté situado este identificador en la página.

El objetivo de este artículo es mejorar el efecto de scroll hacia estas anclas empleando para ello jQuery y un plugin stickymojo para mantener el menú de enlaces siempre visible.

En el ejemplo que vamos a ilustrar vamos a tener una columna izquierda donde vamos a tener el menú de enlaces hacia las anclas y un bloque de contenido a la derecha donde estarán las anclas.

El menú lo crearemos de la siguiente forma:

<ul>
    <li><a href="#titulo1" class="ancla">Titulo 1</a></li>
    <li><a href="#titulo2" class="ancla">Titulo 2</a></li>
    <li><a href="#titulo3" class="ancla">Titulo 3</a></li>
</ul>

Fíjate que son links con anclas con una clase.

En el contenido tendremos los identificadores, como por ejemplo:

<h1 id="titulo1">Titulo 1</h1>

Vale, ahora solo falta ver la clave del asunto. El código jQuery que deberemos incluir en la cabecera de la página:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/stickyMojo.js"></script>
<script type="text/javascript">
$(document).ready(function() {    

    $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#content'});

    $('.ancla').click(function(){
        var link = $(this);
        var anchor  = link.attr('href');
        $('html, body').stop().animate({
            scrollTop: jQuery(anchor).offset().top
        }, 2000);
        return false;
    });
});
</script>

Estamos incluyendo la librería jQuery, el plugin stickymojo, la llamada al plugin y el código necesario para aplicar el efecto slide durante el scroll hacia el identificador de la ancla.

Al plugin de stickymojo le estamos pasando 2 parámetros. En el primer parámetros estamos indicando hasta donde queremos que se mueva el menú de la columna izquierda y en el segundo parámentro identificamos el contenedor de referencia.

El código que se ejecuta al pulsar uno de los links del menú es lo que va a continuación. Por cada ancla que sea clickeada vamos a coger su link, es decir, el identificador a donde queremos llegar y utilizando la función animate de jQuery aplicamos un efecto de scroll slide de 2 segundos.

Ver ejemplo en funcionamiento