Scroll to top animado con jQuery jQuery

Crear un botón que lleve al usuario a la parte superior de la página es una práctica que se ha extendido ampliamente, yo mismo lo utilizo en muchos proyectos. Y es que con la proliferación del «scroll infinito» y los dipositivos táctiles, ofrecer una forma rápida de volver hacia arriba es casi una obligación desde un punto de vista de UX.

Pero no vale hacer un scroll to top de cualquier forma. Por ejemplo, imagina que los hacemos con algo así:

window.scrollTo(0, 0);

El usuario dará un salto repentino a la parte superior de la página y puede verse perdido por unos segundos. Para evitarlo podemos animar el scroll, hacer que la página se desplace hacia arriba de una forma más suave que permita al usuario ver a dónde se le está llevando.

Con jQuery está animación del scroll es muy sencillo, basta una simple línea utilizando el método .animate(). En el siguiente ejemplo se hace un efecto de scroll to top hasta que la posicón actual esté a una distancia superior de 0 píxeles de los elementos <html> y <body> con una duración de 800 milisegundos:

$('html, body').animate( { scrollTop : 0 }, 800 );

Ejemplo

Vamos a construir un ejemplo básico en el que aparecerá un botón con un flecha en la esquina derecha superior de la ventana y que al pulsarlo haga el scroll to top animado. El botón se hace visible sólo si bajamos al menos 100 px en la página. En el ejemplo hemos utilizado un font icon de bootstrap como botón y hemos añadido texto sólo para lectores de pantalla, importante para la accesibilidad.

1

HTML

<a href="#" class="scroll-to-top"><span class="glyphicon glyphicon-arrow-up"></span><span class="sr-only">Ir arriba</span></a>
2

CSS

/*texto para lectores de pantalla*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.scroll-to-top{
  text-decoration: none;
  position: fixed; 
  top: 20px;
  right: 20px;
  display: none;
  font-size: 36px;
  color: #555;
}

.scroll-to-top:hover{
  text-decoration:none;
  color: #000;
}
3

jQuery

(function($){

$(document).ready(

  function(){

    // Comprobar si estamos, al menos, 100 px por debajo de la posición top
    // para mostrar o esconder el botón
    $(window).scroll(function(){

      if ( $(this).scrollTop() > 100 ) {

        $('.scroll-to-top').fadeIn();

      } else {

        $('.scroll-to-top').fadeOut();

      }

    });

    // al hacer click, animar el scroll hacia arriba
    $('.scroll-to-top').click( function( e ) {

      e.preventDefault();
      $('html, body').animate( {scrollTop : 0}, 800 );

    });

  });

})(jQuery);

Demo

A continuación puedes ver el código anterior en acción: