Cómo hacer un scroll animado

¡Bienvenidos a una nueva sección de nuestro blog!

Al ser el estreno, nos enrollaremos un poco más en contaros de qué va exactamente Funciona Tips. Aquí encontrarás pequeños tutoriales sobre cómo hacer tal y cuál cosa sobre programación, maquetación o diseño web: scroll animado. Nuestra intención es que salgas del artículo sabiendo más que el protagonista de Mr.Robot.

Presentaremos una pequeña la solución a la pregunta y un código para implementar en vuestra web o proyecto.

Sin más dilación, comenzamos con el primero de muchos que vendrán.

En nuestro primer tutorial, contamos con Chema, uno de nuestros programadores, que nos cuenta cómo hacer un scroll animado en nuestra web. Para ello, necesitamos un código de JavaScript sencillo:

<script type="text/javascript">
   $(function(){
       $("a.ancla").off().on("click", function(e){
          e.preventDefault();
          var ancla = $(this).attr("href");
          $("html,body").animate({
               scrollTop: $(ancla).offset().top
          });
       });
   });
</script>

Con él conseguiremos que nuestro botón nos lleve al principio o al final de la página con una transición suave en vez de hacerlo de forma brusca. Tened en cuenta que todo depende de la clase a la que hayáis definido en vuestra etiqueta <a>. En nuestro caso lo hemos definido como «ancla».