Ottieni la posizione di scorrimento corrente e passala come variabile con un link?

Question

Sarò onesto, sono fuori dalla mia profondità qui. Ho creato un sistema di impaginazione in cui si fa clic su un collegamento per ricaricare la pagina e un determinato numero di elementi dell'elenco vengono visualizzati in un elenco non ordinato. Quando fai di nuovo clic, verrà ricaricata la pagina e verranno visualizzati altri elementi. Pensa a come Twitter mostra i tweet nel tuo feed.

Il problema è quando ricarica la pagina che rimane in alto. Quello che vorrei è che salta nella stessa posizione sulla pagina che aveva in precedenza.

Ho già un selettore per il collegamento impostato correttamente, ma non so come ottenere la posizione di scorrimento corrente e quindi passarla alla nuova pagina per farla saltare.

Ecco il mio codice finora:

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

Dove vado da qui?

Answer 1

1. Ricarica gli elementi utilizzando AJAX invece di ricaricare l'intera pagina.

2. Ottieni e imposta la posizione di scorrimento usando window.pageYOffset e window.scrollTo (0, y) .

   Memorizzerei la posizione nell'hash dell'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

Come ha detto gs, aggiungi gli elementi tramite una chiamata Ajax invece di ricaricare la pagina.

Se non si desidera utilizzare jQuery.ScrollTo collegare. Che supporta tutto ciò che riguarda lo scorrimento che avresti mai potuto sognare

Answer 3

Penso che ciò di cui hai bisogno sia solo passare un'ancora HTML alla fine del tuo link. Il browser scorrerà automaticamente fino all'elemento proprio accanto all'ancora corrispondente. Esempio:

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

Ad un certo punto nel mezzo di page2:

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

Answer 4

secondo il link di @Shawn Grigson, pageYOffset non è supportato allo stesso modo su tutti i browser.

una soluzione jQuery (speriamo davvero compatibile con più browser, anche se non l'ho ancora testato) per ottenere e impostare lo scorrimento verticale di un elemento è scrollTop () .