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;
  2. //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 .

  3. El siguiente código hace que vayamos al principio de la página:
  4. $("#arriba").click(function(){
    	$("html, body").animate({scrollTop:"0px"});
    });
    
  5. Ahora para ir al final de la página:
  6. //obtenemos la altura del documento
    var altura = $(document).height();
    
    $("#abajo").click(function(){
    	$("html, body").animate({scrollTop:altura+"px"});
    });
    
  7. El siguiente código nos indica cuando se llega al final de la página.
  8. //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

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


  • Juan Manuel

    Muchas gracias, era lo que necesitaba.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR