detectar - scroll down jquery

¿Obtener la posición de desplazamiento actual y pasarla como una variable con un enlace?

Question

Seré honesto, estoy fuera de mi profundidad aquí. He creado un sistema de paginación en el que hace clic en un enlace para volver a cargar la página y se muestra una cierta cantidad de elementos de lista en una lista sin ordenar. Cuando vuelvas a hacer clic, se volverá a cargar la página y se mostrarán más elementos. Piensa en cómo Twitter muestra los tweets en tu feed.

El problema es cuando vuelve a cargar la página que permanece en la parte superior. Lo que me gustaría es que salte a la misma posición en la página que tenía anteriormente.

Ya tengo un selector para la configuración del enlace. No sé cómo obtener la posición de desplazamiento actual y luego pasarlo a la nueva página para que salte.

Aquí está mi código hasta ahora:

jQuery(document).ready(function(){
    $("a[rel=more]").live("click", function(){
        //script...
    });
});

¿A donde voy desde aqui?

Answer 1

1. Vuelva a cargar los elementos utilizando AJAX en lugar de volver a cargar toda la página.

2. Obtenga y establezca la posición de desplazamiento utilizando window.pageYOffset y window.scrollTo(0, y) .

   Yo almacenaría la posición en el hash de la URL:

   // after loading the document, scroll to the right position
   // maybe location.hash has to be converted to a number first
   $(document).ready(function() {
       window.scrollTo(0, location.hash);
   });
   
   // I''m not quite sure if reload() does preserve the hash tag.
   location.hash = window.pageYOffset;
   location.reload();

Answer 2

Como dijo gs, agregue los elementos a través de una llamada ajax en lugar de volver a cargar la página.

Si no desea utilizar el complemento jQuery.ScrollTo . Que soporta todo lo relacionado con el desplazamiento que jamás hayas soñado.

Answer 3

Creo que lo que necesitas es simplemente pasar un ancla HTML al final de tu enlace. El navegador se desplazará automáticamente al elemento justo al lado del ancla coincidente. Ejemplo:

<a href="page2.html#myanchor">Next page</a>

En algún punto en medio de la página 2:

<a name="myanchor">My item N</a>

Answer 4

de acuerdo con el enlace de @Shawn Grigson, pageYOffset no es compatible de la misma manera en todos los navegadores.

Una solución jQuery (es de esperar que sea compatible con todos los navegadores, aunque todavía no la he probado) para obtener y configurar el desplazamiento vertical de un elemento es scrollTop() .