Desplazamiento animado en anclas de enlaces con jQuery

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…

También te podría gustar...

Sobre este artículo

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…

URL: lawebera

Se dedica desde hace más de 10 años al diseño web y muy especialmente al front-end. Apasionada de Internet y los proyectos online. Sigue muy de cerca todo lo que se cuece en cuanto a emprendimiento. Ha trabajado como front-end y visual designer para empresas como ELPAIS, Banco Santander y actualmente Tuenti.

49 Respuestas

  1. Musta la idea! ¿tu crees que la pueda poner en un blogspot de blogger? Estoy haciendo una entrada para poner enlaces y me gustaria poner este truco de Scrool suave te dejo el
    link para que me entiendas mejor http://bit.ly/enlaces-dentro-de-la-misma-pagina

    • Hola Julio,

      Claro! si tienes la opción de editar el template, puedes ponerlo y debería funcionar. Es un script que no depende de la plataforma que uses, sea Blogger, WordPress o lo que sea.

      Saludos.

  2. Sergio

    Muchas gracias, me ha funcionado a la perfección en Prestashop 1.6!

    • Verónica Milán

      Genial Sergio, me alegro de que te haya sido útil :)

      • Desarrollador FullStack

        Hay que tener un poco de cuidado con este código, si tienes conocimientos de javascript sabrás que que el “return false;” que devuelve al final del código parará todos los procesos ‘javascript’ que estén funcionando en ese momento, un ejemplo; un “Tab” que sería un botón en una página que te envía a otro contenido (‘div’) en la misma web y ocultando el contenido actual que estás visualizando sin recargar la página, con ese “return false;” perdería la interacción ya que los tabs que yo conozco están basados en javascript, también funcionan con anclajes a un ID (‘#’) y son una herramienta de ‘Bootstrap’ que normalmente se utiliza en los ‘gestores de contenido’ como por ejemplo WordPress.
        También es importante saber que en las versiones de jQuery migrate 1.3.0, jQuery 2.2.0 y jQuery 3.2.1 se han detectado errores por el selector ‘#’ devolviendo que no es valido, ya que es uno de los “caracteres especiales” no permitidos en las librerías jQuery con las versiones anteriormente mencionadas, necesita un comando de escape que quedaría así; ‘a[href*=\\#]’ y con el cual no te daría este error.
        Con el siguiente código no interfieres en ningún posible problema de los comentados y recomiendo tener siempre presente el código introducido en la Web para “posibles problemas” que pueda ocasionar, hay que mencionar que no me hago responsable de los posibles problemas que pueda ocasionar este código en tu Web y que siempre es mejor consultar a un experto en el campo que en este caso es Programador de Javascript.
        Un saludo y gracias por el contenido ya que me sirvió de ayuda :)

        Código actualizado sin errores:

        // Scroll animado

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

        • Sebastián

          Hola, seguro de que es así? esta linea me aparece como un error:

          $(‘a[href*=\\#]’).click(function() {

          • Yo puse el código en una web desarrollada por mí completamente, si estás utilizando un gestor de contenido tipo WordPress no puedo asegurarte que esto no produzca algún tipo de conflicto, te dejo mi código completo y si especificas el error podríamos ayudarte mejor, un saludo.
            https://codepen.io/anon/pen/LdGRqg?editors=1111

          • Gracias por tu aportación, Desarrollador Fullstack! :)

          • Desarrollador FullStack

            ¡ Por nada ! ;-)
            Pero tener en cuenta que todo esto pasa por jQuery y puede ocasionar algún problema,
            yo para una web compleja optaría por centrarme en que los selectores del contenedor de los “anclajes” sean únicos y no engloben el ‘body’, también se podría buscar una librería especifica para esto que sería una buena opción aunque mucho más compleja o buscar en ‘codepen’ algún ejemplo más elaborado y que se adapte a tus necesidades.
            Ya tienes este código para salir del apuro y para la base de tu solución, en ningún caso intento desvalorar el gran trabajo de Verónica Milán, a mí personalmente me sacó de un apuro, actualmente estoy utilizando el código y es la base de mi solución, pero todo se puede mejorar, escalar y actualizar, sobretodo si son 10 líneas de código jejeje.

            Mi temor es que estamos englobando todo lo que contiene el body en la interacción y cualquier etiqueta ‘a’ con ‘href’ podrá darte un error inesperado, ejemplo;

            Supongamos que estás con un proyecto para un cliente y le dejas varios de los típicos enlaces de muestra con ‘href’ a ninguna parte (href=”#”) para que pueda clickear en ellos, pues con este código te dará un error y después de hacer algunas pruebas podrás ver que exactamente será este;

            /*! Versión: jQuery v3.2.1 */

            Uncaught Error: Syntax error, unrecognized expression: [name=]
            at Function.Sizzle.error (jquery.js:1580)
            at Sizzle.tokenize (jquery.js:2232)
            at Sizzle.select (jquery.js:2659)
            at Function.Sizzle [as find] (jquery.js:884)
            at jQuery.fn.init.find (jquery.js:2922)
            at new jQuery.fn.init (jquery.js:3032)
            at jQuery (jquery.js:98)
            ——> at HTMLAnchorElement. (utils.js:275) <———– línea donde empieza mi código

            at HTMLAnchorElement.dispatch (jquery.js:5206)
            at HTMLAnchorElement.elemData.handle (jquery.js:5014)

            Esto pasó al entrarle la cadena vacía y no haber definido nada para actuar en tal caso, por eso comento que se puede buscar algo más elaborado o escalar el código según tus necesidades, os ahorrará muchos dolores de cabeza jejeje, un saludo.
            Enmanuel.

  3. Maria

    Alguien podria subir el codigo entero de una pagina normal? No se colocar cada cosa , no se si se coloca en el head, body…

  4. Carla

    Me ha servido mucho, gracias!

  5. Madelyn

    Muchas gracias!!
    Eres el mejor!! Gracias por el aporte!

  6. Alexis

    Excelente! lo probe en mi WEB, y no dio problemas. Gracias por el aporte.

  7. pablo

    Hola como hago para que funcione este código también en dispositivos móviles

  8. RAPTOR

    Funciona excelente gracias

  9. María

    Hola! este código funciona a la perfección, pero en una web donde tengo una galería lightbox con jquery, al poner esta función a las anclas la galería deja de funcionar.
    ¿Alguna solución?
    Gracias

  10. Christian

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

  11. 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á?

  12. Ruben

    Eres lo mejor, te pasaste. Era justo lo que necesitaba, ahora solo quisiera entender bien el código para poder hacerle variaciones por si algún día lo necesito.

  13. Jesus

    Excelente amigo.

  14. Omar

    Eres lo Maximo, muchas gracias!!!

  15. manuel

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

  16. sebastian

    GRACIAS ME HA FUNCIONADO UN SALUDO !!!

  17. Colorin Colorado

    ExCelente aporte! PráCtiCo y funCiona!!

  18. Daniel Ruiz

    Gracias funcionó de maravilla y a la primera

  19. Ihtiare

    Muy bueno y simple! Agradecida :)

  20. Alex

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

  21. 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.

  22. Rick

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

  23. 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.?

  24. Jose

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

  25. Beto

    muy buen tutorial

    =)

  26. guille

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

  27. Jorge

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

  28. 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!

  29. Jose

    Muy bueno, me sirvio mucho, gracias

  30. Juan Pablo

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

  31. 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 !

  32. Robert Barajas

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

  33. 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!

  34. Andruz

    muchas gracias, era justo lo que andaba buscando.

  35. mariana

    Muchas gracias!! me sirvió a las mil maravillas. Muy claro, sobre todo para personas que no entendermos JQuery! saludos

  36. rogama

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

    Un abrazo

Deja un comentario

El email no se publica. Todos los campos obligatorios, salvo Web.