Detectar scroll, el principio o final de página con jQuery



Les traigo un script para detectar si el usuario esta en la parte de arriba o en la parte de abajo de la pagina:

$(function () {
             var $win = $(window);
 
             $win.scroll(function () {
                 if ($win.scrollTop() == 0)
                     alert('Scrolled to Page Top');
                 else if ($win.height() + $win.scrollTop()
                                == $(document).height()) {
                     alert('Scrolled to Page Bottom');
                 }
             });
});

Aca les traigo la utilidad de cada función utilizada



$(window).height(); // devuelve la altura del viewport del navegador
$(document).height(); // devuelve la altura del documento HTML
$(window).scrollTop(); // devuelve la posición vertical actual de la barra de scroll


De manera que, si la barra de scroll se encuentra arriba del todo $(window).scrollTop() vale cero. Del mismo modo, si el valor del viewport del navegador más la posición vertical de la barra de scroll es igual a la altura total del documento, entonces el usuario ha hecho scroll hasta el fondo de la página.

2 comentarios:

  1. y si no quiero saber la posición del scroll si no del scroll de algun elemento dentro del documento html como lo sabria su posición .??

    ResponderBorrar
    Respuestas
    1. Gracias por tu comentario Carlos

      Tendrías que utilizar "$(window).scrollTop();"pero en este caso la caja que quieres identificar tiene que tener un id unico para identificarlo, por ejemplo "micaja":

      var elmicaja= document.getElementById("micaja");
      var y = elmicaja.scrollTop; //esto muestra en que parte del documento con relación a la parte superior se encuentra la caja

      Borrar