Hoy vamos a aprender a utilizar el evento .scroll de jQuery, así como animar el desplazamiento de la página de un lugar a otro con un bonito efecto.

1. Lo primero incluimos la librería jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

1. Para animar el desplazamiento de la página, utilizamos el siguiente código;

//obtenemos la posición en la que se encuentra el botón
var posicion_boton = $("#boton").offset().top;
				
//hacemos scroll hasta el botón
$("html, body").animate({scrollTop:posicion_boton+"px"});

Lo que hace este código, es obtener la posición de un botón, para que la página se desplace hasta su posición. Esto lo podemos hacer con cualquier elemento que tengamos en él .

2. El siguiente código hace que vayamos al principio de la página:

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

3. Ahora para ir al final de la página:

//obtenemos la altura del documento
var altura = $(document).height();

$("#abajo").click(function(){
	$("html, body").animate({scrollTop:altura+"px"});
});

4. El siguiente código nos indica cuando se llega al final de la página.

//obtenemos la altura del documento
var altura = $(document).height();

$(window).scroll(function(){
	if($(window).scrollTop() + $(window).height() == altura) {
		alert("Has llegado al final de la página");
	}
		   
});

Esto se utiliza en muchas páginas (Facebook o Twitter) como método de paginación, al llegar al final de la página, hace una petición Ajax y carga más resultados.

Ver ejemplo