Come ottenere e impostare la posizione di scorrimento della pagina Web corrente?

121

Come posso ottenere e impostare la posizione di scorrimento della pagina Web corrente?

Ho un modulo lungo che deve essere aggiornato in base alle azioni / input dell'utente. Quando ciò accade, la pagina si reimposta all'inizio, il che è fastidioso per gli utenti, perché devono scorrere indietro fino al punto in cui si trovavano.

Se potessi catturare la posizione di scorrimento corrente (in un input nascosto) prima che la pagina si ricarichi, potrei quindi reimpostarla dopo che è stata ricaricata.

javascript html

— xyz
fonte

Un modulo basato su AJAX non è un modo migliore per prevenire questi effetti (e ovviamente fornire un fallback nel caso in cui XHR non sia disponibile)? Le ricariche della pagina avranno la pagina per saltare all'inizio e indietro di nuovo, una stranezza che può essere fastidiosa.

— Marcel Korpel

118

Stai cercando la document.documentElement.scrollTopproprietà.

— SLaks
fonte

grazie, ho trovato questo: articles.sitepoint.com/article/javascript-from-scratch/6 e ho modificato il getScrollingPosition()per memorizzare i valori in variabili nascoste. Quindi nell'html della pagina aggiornata che uso <body onLoad="window.scrollTo(x,y), dove xey sono quelli dei valori dei valori nascosti!

— xyz

46

Sto scoprendo, almeno su Chrome su Ubuntu, che document.documentElement.scrollToprestituisce sempre 0. document.body.scrollTop, tuttavia, sembra funzionare. Un Firefox su Ubuntu, d'altra parte, è vero il contrario: ottieni 0 con bodye l'importo corretto con documentElement. Qualche idea su cosa dia?

— Tobek

12

Questa risposta non è accurata in quanto la scrollTopproprietà non funziona su tutti i browser. Controlla window.pageXOffsete window.pageYOffsetper risultati migliori.

— gyo

135

La risposta attualmente accettata non è corretta: document.documentElement.scrollToprestituisce sempre 0 su Chrome. Questo perché WebKit utilizza bodyper tenere traccia dello scorrimento, mentre Firefox e IE utilizzano html.

Per ottenere la posizione corrente, desideri:

document.documentElement.scrollTop || document.body.scrollTop

Puoi impostare la posizione corrente su 1000 px nella pagina in questo modo:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

Oppure, usando jQuery (animalo mentre ci sei!):

$("html, body").animate({ scrollTop: "1000px" });

— tobek
fonte

5

la risposta di gyo, suggerendo window.pageYOffsetè più pulito se stai usando window.scrollBy()o window.scrollTo()metodi.

— igorsantos07

32

Ci sono alcune incongruenze nel modo in cui i browser espongono le coordinate di scorrimento della finestra corrente. Google Chrome su Mac e iOS sembra tornare sempre 0quando si utilizza document.documentElement.scrollTopo jQuery $(window).scrollTop().

Tuttavia, funziona in modo coerente con:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

— Gyo
fonte

L'ho notato anch'io, è un bug su Mac e iOS?

— Alexander Kim

@AlexanderKim Penso che potrebbe essere correlato a come vengono interpretate alcune regole CSS (come l'overflow), ed è stato segnalato che funziona se si controlla scrollTop sia sul corpo che sugli elementi html. Tuttavia, per evitare test e debug, mi affido sempre a pageXOffset / pageYOffset sicura e coerente.

— gyo

1

grande grazie per la risposta corretta

— Michele Paccione

5

Sono andato con la soluzione di archiviazione locale HTML5 ... Tutti i miei collegamenti chiamano una funzione che lo imposta prima di cambiare window.location:

localStorage.topper = document.body.scrollTop;

e ogni pagina ha questo nel body's onLoad:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

— AX Labs
fonte

3

Sarebbe più elegante usare setItem () e getItem () di localStorage e invece eseguire il backup della posizione di scorrimento ad ogni clic sul collegamento, memorizzarlo una volta quando si esce dalla pagina: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});

— StanE