Jak uzyskać i ustawić bieżącą pozycję przewijania strony internetowej?

121

Jak mogę uzyskać i ustawić bieżącą pozycję przewijania strony internetowej?

Mam długi formularz, który wymaga odświeżenia na podstawie działań / danych wejściowych użytkownika. W takim przypadku strona resetuje się na samą górę, co jest denerwujące dla użytkowników, ponieważ muszą przewinąć z powrotem do miejsca, w którym się znajdowali.

Gdybym mógł uchwycić bieżącą pozycję przewijania (w ukrytych danych wejściowych) przed ponownym załadowaniem strony, mógłbym następnie ustawić ją z powrotem po ponownym załadowaniu.

javascript html xyz
źródło
Czy formularz oparty na AJAX nie jest lepszym sposobem zapobiegania tym efektom (i oczywiście zapewnia rezerwę na wypadek niedostępności XHR)? Po przeładowaniu strony strona przeskakuje na górę iz powrotem, co może być irytujące.
Marcel Korpel

Odpowiedzi:

118

Szukasz document.documentElement.scrollTopnieruchomości.

SLaks
źródło
dzięki, znalazłem to: artykuły.sitepoint.com / article / javascript -from-scratch/6 i zmodyfikowałem, getScrollingPosition()aby przechowywać wartości w ukrytych zmiennych. Następnie w html odświeżonej strony <body onLoad="window.scrollTo(x,y), której używam , gdzie x i y to te z wartości ukrytych!
xyz
46
Odkryłem, że przynajmniej w Chrome na Ubuntu document.documentElement.scrollTopzawsze zwraca 0. document.body.scrollTopJednak wydaje się, że działa. Z drugiej strony jeden Firefox na Ubuntu jest odwrotny - dostajesz 0 bodyi prawidłową kwotę documentElement. Masz jakiś pomysł, co daje?
tobek
12
Ta odpowiedź nie jest dokładna, ponieważ scrollTopusługa nie działa we wszystkich przeglądarkach. Sprawdź window.pageXOffseti window.pageYOffsetdla lepszych wyników.
gyo
135

Aktualnie akceptowana odpowiedź jest nieprawidłowa - document.documentElement.scrollTopzawsze zwraca 0 w przeglądarce Chrome. Dzieje się tak, ponieważ WebKit używa bodydo śledzenia przewijania, podczas gdy Firefox i IE używają html.

Aby uzyskać aktualną pozycję, chcesz:

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

Możesz ustawić bieżącą pozycję na 1000 pikseli w dół strony, w następujący sposób:

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

Lub za pomocą jQuery (animuj go, gdy jesteś na tym!):

$("html, body").animate({ scrollTop: "1000px" });
tobek
źródło
5
Odpowiedź gyo, sugerująca, że window.pageYOffsetjest czystsza, jeśli używasz metod window.scrollBy()lub window.scrollTo().
igorsantos 07
32

Istnieją pewne niespójności w sposobie, w jaki przeglądarki wyświetlają współrzędne przewijania bieżącego okna. Wygląda na to, że Google Chrome na Macu i iOS zawsze powraca 0podczas używania document.documentElement.scrollToplub jQuery $(window).scrollTop().

Jednak działa spójnie z:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset
gyo
źródło
Też to zauważyłem, czy to błąd na Macu i iOS?
Alexander Kim
@AlexanderKim Myślę, że może to być związane ze sposobem interpretacji niektórych reguł CSS (takich jak przepełnienie) i zostało zgłoszone, że działa, gdy sprawdza scrollTop zarówno na elementach body, jak i html. Jednak aby uniknąć testowania i debugowania, zawsze polegam na bezpiecznym i spójnym pageXOffset / pageYOffset.
gyo
1
wielkie dzięki za poprawną odpowiedź
Michael Paccione
5

Wybrałem rozwiązanie lokalnego przechowywania HTML5 ... Wszystkie moje linki wywołują funkcję, która ustawia to przed zmianą window.location:

localStorage.topper = document.body.scrollTop;

a każda strona ma to w treści onLoad:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }
AX Labs
źródło
3
Bardziej eleganckie byłoby użycie setItem () i getItem () funkcji localStorage i zamiast tego tworzenie kopii zapasowej pozycji przewijania przy każdym kliknięciu linku, zapisywanie go raz przy opuszczaniu strony: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});
StanE