Armando un Plugin para animar anclas internas con Jquery

El propósito de este artículo es, a través de un ejemplo sencillo, poder entender algunos mecanismos básicos para la creación de un script jquery eficiente y no intrusivo. Para poder entender las líneas que siguen es necesario un mínimo entendimiento de javascript y haber utilizado la librería jquery.

Objetivo del Plugin

El objetivo es capturar todos los vínculos internos e implementar una solución de scroll suavizado para acceder a la sección determinada de la pantalla. En este caso el plugin se inicia automáticamente al haberse cargado el documento ( evento document.ready )

ver demo funcionando

Seleccionando todos los vínculos internos

Una de las virtudes del método de selección de elementos a través de jquery es que podemos utilizar selectores CSS avanzados, como por ejemplo el selector por atributos: mediante el uso de corchetes se indica el atributo y el valor que queremos buscar, por ejemplo, input[type=text] traería a todos los <input> cuyo atributo type sea «text». Existe otra implementación de este selector que es «atributos que comiencen de determinada manera», por ejemplo a[href^=#] selecciona a todos los <a> cuyo atributo href comience con el numeral.

Nosotros sabemos que cualquier href que comience con el #apunta a un vínculo interno, por lo que utilizaremos ese selector para obtener todo el conjunto de <a>:

$('a[href^=#]')

Acto seguido vamos a vincular una función que capture el click de cada uno de estos anclas:

$('a[href^=#]').click(function(){

//obtenemos el valor del href
var href = $(this).attr(‘href’);
//realizamos un substring contando desde el primer caracter, para eliminar el # del principio de la cadena
var name = href.substring(1);

//le pedimos al documento que se anime
root.animate({
//con el selector de CSS de atributos, traemos al elemento cuyo atributo «name» corresponda con el href del link
//la función offset() de jquery nos devuelve un objeto con la propiedad «top» que indica la ubicación del elemento en la pantalla
//básicamente le estamos diciendo al documento que lleve el scroll de forma animada hacia esa coordenada
scrollTop: $( ‘a[name=»‘+name+’»]’ ).offset().top
}, 500);

//obtenemos la url que está en la barra de navegación
//con la función split «rompemos» ese String en un array en base al caracter #
//la posición 0 de ese array sería la parte que está «antes» del hashtag del sitio
var urlBase = window.location.href.split(‘#’)[0];

//agregamos de forma dinámica el hashtag que corresponde al ancla interna que estamos viendo, para poder copiar y pegar la URL
window.location.href = urlBase + href;

//cancelamos el evento de click natural del , de otra forma se recargaría la página y no se vería la animación
return false;

});

Vinculando la funcionalidad a la carga del documento

Antes de poner en producción este código, es importante que el documento esté cargado para poder seleccionar todas las anclas.
Para ello generaremos una función init que se vinculará al evento ready del documento.

Encapsulando el código

El concepto de closure es útil en este caso, la idea es que la función init esté contenida o encapsulada dentro de un espacio de memoria diferente, para evitar colisiones (¿qué pasaría si tengo otra función init en otro archivo?). Para ello definimos una función que va a envolver a todo nuestro programa, y la ejecutaremos al cargar el archivo js.

ver el javascript final

Conclusión

Esta es una manera sencilla de hacer un código reutilizable y no intrusivo. Cuando digo no intrusivo me refiero a que desde el maquetado HTML no estamos agregando ningún tipo de marcación para que funcione el código, con sólo incluir el .js todas las anclas internas incorporarán el comportamiento de animar a la pantalla para acceder al link. ¡A incluirlo en nuestras pantallas!