Una forma sencilla de desplazarse con jQuery

Este sería un método genérico de agregar la posibilidad de animar el desplazamiento interno ha cualquier parte de una página web. En palabras simples, hacer click en alguna parte y que la página se mueva y nos ubique allí.

Hay muchos plugins de jQuery que lo hacen pero para un uso normal, suelen ser excesivos porque están pensados para adaptarse a situaciones y necesidades diversas y, al final de cuentas, uno siempre los usa de modo bastante más elemental.

¿Cómo hacer esto? Basta saber dos cosas: la posición de la etiqueta donde se hace click y la posición de la etiqueta a donde queremos ir; luego, bastaría usar la propiedad scrollTop para mover la página esa distancia.

Por ejemplo, este enlace nos desplazaría hasta el footer de la página:

<a class="moverse" href="#footer-wrapper">ir al footer</a>

El script es sencillo, asociamos una clase cualquiera (en este caso la llamo moverse) a un evento onclick:

$('.moverse').live('click', function(e) { 
  // con esto, impedimos que se ejecute (más información)
  e.preventDefault();
  // leemos el atributo href de la etiqueta que es el ID a donde queremos ir
  var adonde = $(this).attr('href');
  // guardamos su posición en la página (más información)
  var posicion_donde = $(adonde).offset();
  // y calculamos la distancia entre donde estamos y donde queremos ir
  var distancia = posicion_donde.top;
  // por último, nos movemoss usando una animación (más información)
  $('body,html').animate({scrollTop: distancia}, 500);
});

Otro ejemplo: ir al inicio de la página

<a class="moverse" href="#outer-wrapper">ir al inicio de la página</a>

O a cualquier parte