• Home
• De Cero
• Manuales
• Artículos
• Recursos
• RSS

Buscar

Estás en Inicio > jQuery > Desplazamiento animado en anclas de enlaces con…

Desplazamiento animado en anclas de enlaces con jQuery

Escrito el 26 mayo, 2010 por Verónica Milán

Estaba buscando para un proyecto en el que estoy trabajando la manera de hacer desplazamientos dentro de la página de una forma menos brusca a la que brinda el html.

Como sabréis, se pueden crear enlaces que apunten a zonas concretas dentro de la misma página con el elemento href=#. Esto es útil por ejemplo, cuando la página tiene mucho contenido y por tanto mucho scroll vertical, para poner ayudas al usuario y llevarle a zonas importanes de la página con los típicos enlaces de “saltar a contenido”.

Esto se puede hacer con HTML básico de esta manera:

Creas el enlace ancla que va a llevar a otra parte de la página:

<a href="#ancla">Ancla</a>

Creas el id para la zona de la página a donde quieres que lleve el ancla:

<div id="ancla">
... contenido
</div>

El funcionamiento es perfecto, lo que no me gusta es el modo de hacerlo que tiene el HTML, ya que provoca un salto brusco.

Bueno, para hacerlo de forma suavizada, tal y como se muestra en este ejemplo, se consigue poniendo este código JavaScript (jQuery) en el head de tu web o en un archivo externo .js:

$(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}, 1000);

                 return false;

            }

       }

   });

});

Voilá, con este pequeño código en jQuery nada intrusivo se consigue un bonito efecto para tus desplazamientos de página.

Particularmente pienso que este pequeño detalle ayuda a mejorar la usabilidad de este tipo de enlaces, que son poco usables por concepto, precisamente por cosas como las que el propio Nielsen publicó hace años sobre el tema:

Según Nielsen, hay que evitar el uso de enlaces de ancla dentro de las páginas por la sencilla razón de que el usuario tiene un modelo mental bien definido acerca del comportamiento de los enlaces, de forma que cuando pincha en un link espera ser dirigido a una página web distinta de la que está visitando. Los enlaces de ancla violan ese modelo mental al enlazar a zonas dentro de una misma página, lo que puede confundir al usuario.

Con este efecto en jQuery queda más clara la acción del enlace, puesto que en todo momento ves lo que está pasando al notar el desplazamiento, mientras que con html el cambio es tan brusco que parece que te has teletransportado a otro sitio (con perdón de la forma de explicarlo).

Visto en: smashingmagazine

EDITO: releyendo el post veo que no he puesto en ningún sitio que hay que cargar jQuery para hacerlo funcionar… Lo he dado por entendido al tratarse de un script en jQuery, pero por si alguien no se había dado cuenta, en el de la web donde vaya este código, hay que cargar jQuery. Yo lo suelo cargar del cdn de Google para evitar usar recursos de mi servidor, con esta línea:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript" charset="utf-8"></script>

Artículos Relacionados Hacer Tabs (pestañas) con jQuery y CSS Hoy he publicado en la sección de artículos de LaWebera.es un tutorial donde explico como... Ver enlaces (links) rotos Hay muchas aplicaciones en Internet para comprobar los links rotos de tu web, entre ellas... ¿Enlaces o contenido? que es más importante en el SEO Hace unos meses leí un artículo publicado en el segundo número de la revista de... Reportes de posicionamiento y popularidad web UrlTrends es una herramienta que te ofrece reportes sobre la popularidad de tu web medida...

Publicado en jQuery | 16 Comentarios

16 Comentarios para “Desplazamiento animado en anclas de enlaces con jQuery”

Enlaces a esta entrada

• Crear y tratar enlaces con Adobe Dreamweaver CS4

Publicar un comentario

Nombre (requerido)

E-Mail (no será publicado) (requerido)

Web




Seguir los comentarios a través de su feed RSS 2.0.