Volver arriba animado con Jquery

A veces, por conveniencia, incluimos un botón que nos permite regresar rápidamente a la parte superior de una página web sin tener que desplazarnos manualmente.

Si deseas lograr este retorno de forma animada con jQuery, no es nada complicado; permíteme mostrarte cómo hacerlo.

En primer lugar, colocamos el siguiente enlace en el lugar de la página donde queremos que aparezca el botón:

<a href="#" id="irArriba">Ir arriba</a>Lenguaje del código: HTML, XML (xml)

Como puedes observar, le he asignado un ID al enlace. La razón detrás de esto es que nos permitirá controlar el efecto con JavaScript.

A continuación, localizamos la etiqueta de cierre </head> en nuestro código HTML, y justo encima pegamos el siguiente código:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  $(document).ready(function(){
    $("#irArriba").click(function(){
      $('html, body').animate({scrollTop: 0}, 1250);
      return false;
    });
  });
</script>Lenguaje del código: HTML, XML (xml)

Con $('html, body').animate({scrollTop: 0}, 1250);, logramos el efecto deseado, donde «1250» es la velocidad del retorno animado.

Si deseas que no regrese completamente a la parte superior, sino que se detenga a una cierta distancia, por ejemplo, a 100 píxeles, puedes ajustar el número de píxeles en la instrucción scrollTop: 0.

Espero que encuentres útil esta técnica para mejorar la experiencia de navegación en tu página web. ¡Inténtalo y haz que tu sitio sea aún más agradable para los usuarios!