Scroll lento hacia enlaces ancla con jQuery

Scroll lento hacia enlaces ancla con jQuery

Scroll lento hacia enlaces ancla con jQuery

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

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

Si te ha gustado no olvides compartir en redes sociales.

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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Una idea sobre “Scroll lento hacia enlaces ancla con jQuery”

Translate »
Ir a la barra de herramientas