Blog Reacción Estudio

¡Tu zona de aprendizaje!

Asignar evento a un elemento generado dinámicamente con jQuery

Como usar el evento .scroll de jQuery

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

  • Juan Manuel

    Muchas gracias, era lo que necesitaba.

  • Gabriel Bregante

    Buenas, quisiera hacer una consulta, porque cuando estoy abajo presiono ir a arriba se posiciona arriba rapidamente , luego vuelve abajo y comienza con el efecto lento? es algo que no logro solucionar. Gracias!

  • Bryan Rios

    Gracias

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