En nuestro sitio web a veces podemos tener páginas con mucho texto (por ejemplo, un artículo largo con muchos comentarios), haciendo que el usuario que nos visite tenga que hacer scroll hacia abajo para leerlas. Como normalmente el menú de enlaces estará en la parte superior de la página el usuario tendrá que volver a hacer scroll hacia arriba, ya sea con la barra de scroll del navegador o con la rueda del ratón. Dependiendo de la longitud de la página esto puede llegar a ser muy incómodo.

Es una buena práctica incluir un enlace al final de estas páginas para ofrecer una forma rápida y cómoda de volver al principio. Este enlace puede consistir simplemente de lo siguiente:

<a href="#">Subir</a>

Al pinchar en este enlace apareceremos automáticamente en la parte superior de la página. En efecto es instantáneo y "seco".

Demo

Con jQuery podemos mejorar este comportamiento, ofreciendo algo visualmente más atráctivo como veremos a continuación.

Animando el desplazamiento

jQuery proporciona la función animate() para efectuar animaciones sobre propiedades númericas CSS, es decir, aquellas cuyos valores posibles son números. Utilizando esta función y la propiedad scrollTop podemos conseguir un mejor efecto de desplazamiento que subir de golpe.

HTML:

<a class="topLink" href="#">Subir</a>

Javascript

$("html, body").animate({scrollTop:"0px"});

Subir

Detectando el cambio en el scroll de la ventana

Lo primero es detectar cuando se produce el evento de hacer scroll en una página. Este evento se produce sobre el objeto window o sobre elementos con la propiedad CSS overflow con valor scroll. En el caso que nos ocupa nos interesa el objeto window.

Podemos detectar este evento con la función scroll de la siguiente forma:

$(window).scroll(function(){
  // código
});

scrollTop() obtiene la posición vertical de la barra de desplazamiento del elemento encontrados. Es decir, si invocamos esta función sobre un elemento con scroll, obtendremos el número de píxeles ocultos de la parte superior del area de scroll.

En esta imagen se refleja el area oculta, aquella que no se ve. Invocando en ese momento la función scrollTop() obtendriamos el valor 100.

Como nuestro area de scroll será la propia ventana invocaremos esta función sobre el objeto window:

$(window).scrollTop();

Demo

Mostrando u ocultando el enlace automáticamente

Vamos a utilizar un enlace como el indicado anteriormente. Este se mostrará automáticamente cuando desplacemos la barra de desplazamiento a partir de cierta posición, por ejemplo, 600 píxeles. Para ello utilizaremos un efecto fade para lograr un mayor atractivo visual.

HTML:

<a class="topLink" href="#">subir</a>

Javascript

if($(window).scrollTop() > 600){
  if (!$('.topLink').is(":visible")) $('#toTop').fadeIn();
}else{
  if (!$('.topLink').is(":visible")) $('#toTop').fadeIn();
}

Todo junto

El siguiente código muestra el efecto completo:

$(document).ready(function(){
  $('#toTop').hide();
  $('#toTop').click(function(){
      $("html, body").animate({scrollTop:"0px"});
    });
  $(window).scroll(function(){
    if($(this).scrollTop()>600){
      if (!$('#toTop').is(":visible")) $('#toTop').fadeIn();
    }else{
      if ($('#toTop').is(":visible")) $('#toTop').fadeOut();
    }
  });
});