comparte el articulo 

Desplazamiento animado en anclas de enlaces con jQuery

Actualizado el 08/10/2013 < > 29 Cometarios

Resumen: 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. Aquí la solució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>

Publicado el 26/05/2010, última actualización 08/10/2013.

Autor: Verónica Milán

URL: lawebera

Añadir Comentario (Subir al texto)

29 Cometarios

  1. rogama

    Gracias!!
    Funciona a la perfeccion, solo añadir que para los usuarios de drupal es necesario cambiar el $ por jQuery

    Un abrazo

    Miércoles, 5 de marzo 2014

  2. mariana

    Muchas gracias!! me sirvió excelente, muy claro, sobre todo para personas que no entendermos el JQuery! saludos

    Jueves, 24 de abril 2014

  3. Andruz

    muchas gracias, era justo lo que andaba buscando.

    Martes, 3 de junio 2014

  4. Satur

    Hola! He activado esta animación de jQuery en una web y funciona correctamente. Mi problema consiste en que cuando activo la animación deja de funcionar un evento de ratón que tengo aplicado en el mismo botón con JavaScript. Pienso que entran en conflicto las dos funciones y solo se aplica la animación. Me gustaría saber como puedo hacer que las dos funciones se activen al mismo tiempo.
    Muchas gracias y un saludo!

    Miércoles, 9 de julio 2014

  5. PAblo

    Excelente!!

    Lunes, 14 de julio 2014

  6. Robert Barajas

    Quisiera un ejemplo practico de esto, ya que no se mucho de estas cosas. Algo simple. Gracias de antemano.

    Viernes, 18 de julio 2014

  7. Juan Pablo

    Muy buen còdigo, soy novato y con este còdigo me funcioò a la perfecciòn, el tema es que ahora tengo otro problema, yo tenìa un còdigo de jquery en mi web para un enlace que tengo en el bottom de la pagina que dice: VOLVER ARRIBA , ahora este boton no funciona correctamente con el còdigo que nos brindaste, se podrà solucionar de alguna manera ?
    Mil gracias !

    Lunes, 1 de septiembre 2014

  8. Juan Pablo

    Ya lo solucionè !!! mil gracias !!! con este còdigo puedo conseguir lo que yo quiero en la web !!!

    Lunes, 1 de septiembre 2014

  9. Jose

    Muy bueno, me sirvio mucho, gracias

    Lunes, 1 de diciembre 2014

  10. hernan

    hola,me parecio muy buen el script, te hago una sola consulta, para ayudar a facilitar la búsqueda aun mas, como se hace para que se salte el contenido del div una vez hecho el click de búsqueda?
    Saludos!

    Lunes, 22 de diciembre 2014

  11. Jorge

    muy bien explicado espero sigas revisando, pero como lo hago funcionar el script en Joomla 3.X
    lo he intentado y no funciona

    Miércoles, 4 de febrero 2015

  12. guille

    gracias, estuve buscando este código toda la mañana :D Abrazo!

    Miércoles, 1 de abril 2015

  13. Beto

    muy buen tutorial

    =)

    Miércoles, 8 de abril 2015

  14. Jose

    Muy bien! Me sirvió, rapido y sin complicaciones. GRACIAS

    Viernes, 10 de abril 2015

  15. Jose

    Solo una duda, como puedo hacer el mismo efecto y accion, pero estando en una ventana, me redireccione a otra ventana y se deslice a una parte.?

    Viernes, 10 de abril 2015

  16. Rick

    excelente aporte, exactamente lo que buscaba,, gracias bro..

    Lunes, 20 de abril 2015

  17. xavier Carrera

    Muy buen aporte… solo comentar para quienes tengan como yo la costubre de poner el código jquery al final de la página: No funciona al final, haa de ponerse al principio. Dado que si no funcionan normales los vinculos.

    Viernes, 22 de mayo 2015

  18. Alex

    Esta bien bonito el ejemplo, me sirvio mucho, gracias… esto es lo que necesitaba.

    Viernes, 17 de julio 2015

  19. Ihtiare

    Muy bueno y simple! Agradecida :)

    Miércoles, 14 de octubre 2015

  20. Daniel Ruiz

    Gracias funcionó de maravilla y a la primera

    Miércoles, 4 de noviembre 2015

  21. Colorin Colorado

    ExCelente aporte! PráCtiCo y funCiona!!

    Jueves, 14 de enero 2016

  22. sebastian

    GRACIAS ME HA FUNCIONADO UN SALUDO !!!

    Sábado, 30 de enero 2016

  23. Daniel

    Gracias ;)

    Domingo, 31 de enero 2016

  24. manuel

    existe una forma de darle un margen top lo que pasa es que navega pero queda un poco abajo

    Martes, 9 de febrero 2016

  25. Omar

    Eres lo Maximo, muchas gracias!!!

    Jueves, 28 de abril 2016

  26. Jesus

    Excelente amigo.

    Martes, 17 de mayo 2016

  27. Ruben

    res lo mejor te pasaste era justo lo que necesitaba ahora solo quisiera entender bien el codigo para poder hacerle variaciones por si algun dia lo necesito

    Viernes, 20 de mayo 2016

  28. Carlos Alberto Acosta

    Excelente muchas gracias por el aporte. Es posible q cuando se desplace a alguna seccion, el color de la seccion en el menu cambie? para indicar a traves del menú en que seccion se está?

    Lunes, 19 de septiembre 2016

  29. Christian

    Muchas gracias por el codigo, me ayudo mucho, saludos desde Perú

    Martes, 18 de octubre 2016

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras