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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(13 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

5 respuestas a “Anclas con efecto slide con jQuery”

  1. Recursos Web dice:

    Gracias, el efecto salio perfecto.

  2. Víctor dice:

    Hola, muchas gracias.
    Funciona muy bien y es elegante.
    Víctor.

  3. Alfredo Uribe dice:

    Sin incluir
    $(‘#sidebar’).stickyMojo({footerID: ‘#footer’, contentID: ‘#content’});

    todo lo demás funcionó perfecto,

    Gracias!

  4. mariana dice:

    ?????????????????? y el efecto?

    • Jose Aguilar dice:

      Me parece que el plugin stickyMojo ha dejado de funcionar en las nuevas versiones de jQuery. Quizá se debe acudir a la Web del desarrollador a ver si dispone de una nueva versión del plugin.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre