Scroll lento hacia enlaces ancla con jQuery

En este tutorial aprenderemos a crear enlaces ancla y hacer que la página haga un scroll suave hacia ellos con jQuery.

Si no tienes todavía enlazado jQuery en tu proyecto puedes seguir nuestro tutorial Enlazar proyecto con jQuery

Enlaces ancla

Para crear un enlace ancla debemos incluir un # en el href

Veamos un ejemplo sencillo

<a href="#conclusion">Ir a Conclusión</a>

Para crear el destino de ese enlace tenemos dos opciones:

• Crear un enlace «a name = conclusion»
• Un elemento con «id = conclusion»

  <!--Primera opción. Un enlace a name-->
  <a name="conclusion">
  <!--Segunda opción. Un elemento con id
  <p id="conclusion">Conclusión de la historia</p>

En cualquiera de los dos casos anteriores, al hacer click en el enlace «Ir a Conclusión» la página hará scroll hasta llegar al lugar donde se encuentra el enlace o el id conclusión.

Enlaces ancla con desplazamiento lento

jQuery nos da la opción de desplazamiento lento hacia un enlace ancla, lo que es muy vistoso y a la vez fácil de hacer.

Debemos utilizar una clase y el atributo «data-nombre clase» para que funcione

Veamos un ejemplo

<!--Primero creamos el enlace con los atributos siguientes-->
<a href="#" class="ancla" data-ancla="conclusion">Ir a Conclusión</a>
<!--Destino del enlace. Crearemos por ejemplo un párrafo-->
<p id="conclusion">Párrafo de destino</p>
<!Por último el código jQuery que hace funcionar el scroll lento-->
<script> //Cuando cargue la página completamente
    $(document).ready(function(){
        //Creamos un evento click para el enlace
        $(".ancla").click(function(evento){
            //Anulamos la funcionalidad por defecto del evento
            evento.preventDefault();
            //Creamos el string del enlace ancla
            var codigo = "#" + $(this).data("ancla");
            //Funcionalidad de scroll lento para el enlace ancla en 3 segundos
            $("html,body").animate({scrollTop: $(codigo).offset().top}, 3000);
        });
    });
</script>

Al hacer click en el enlace hará un scroll durante 3 segundos hasta llegar al destino.

Esta funcionalidad puede ser útil en muchas ocasiones

Veamos otro ejemplo

<!--Una página html cualquiera-->
<!--Creamos un botón en el footer-->
<input type="button" id="boton" value="Ir Arriba>
<!--Por último el código jQuery que hace funcionar el scroll lento-->
<script>
    //Cuando cargue la página completamente
    $(document).ready(function(){
        //Creamos un evento click para el botón
        $("#boton").click(function(evento){
            //Funcionalidad para que vaya arriba lentamente
            $("html,body").animate({scrollTop:0}, "slow");
        });
    });
</script>

Al hacer click en el botón hará un scroll lento hasta el principio de la página

Más tutoriales de jQuery

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo