Wie kann ich die aktuelle Bildlaufposition für Webseiten abrufen und einstellen?

120

Wie kann ich die aktuelle Bildlaufposition für Webseiten abrufen und einstellen?

Ich habe eine lange Form, die basierend auf Benutzeraktionen / Eingaben aktualisiert werden muss. In diesem Fall wird die Seite ganz nach oben zurückgesetzt, was für die Benutzer ärgerlich ist, da sie bis zu dem Punkt zurückblättern müssen, an dem sie sich befanden.

Wenn ich die aktuelle Bildlaufposition (in einer versteckten Eingabe) vor dem erneuten Laden der Seite erfassen könnte, könnte ich sie nach dem erneuten Laden zurücksetzen.

javascript html xyz
quelle
Ist eine AJAX-gesteuerte Form nicht ein besserer Weg, um diese Effekte zu verhindern (und natürlich einen Fallback bereitzustellen, falls XHR nicht verfügbar ist)? Beim erneuten Laden von Seiten kann die Seite nach oben und wieder zurück springen, eine Eigenart, die ärgerlich sein kann.
Marcel Korpel

Antworten:

115

Sie suchen die document.documentElement.scrollTopImmobilie.

SLaks
quelle
danke, ich habe folgendes gefunden: articles.sitepoint.com/article/javascript-from-scratch/6 und das geändert getScrollingPosition(), um die Werte in versteckten Variablen zu speichern. Dann verwende ich im HTML der aktualisierten Seite <body onLoad="window.scrollTo(x,y), wobei x und y diejenigen aus den versteckten Werten sind!
XYZ
46
Ich finde, zumindest unter Chrome unter Ubuntu, dass document.documentElement.scrollTopimmer 0 zurückgegeben document.body.scrollTopwird, scheint jedoch zu funktionieren. Bei einem Firefox unter Ubuntu ist das Gegenteil der Fall - Sie erhalten 0 mit bodyund die richtige Menge mit documentElement. Irgendeine Idee was gibt?
tobek
12
Diese Antwort ist nicht korrekt, da die scrollTopEigenschaft nicht in allen Browsern funktioniert. Überprüfen Sie window.pageXOffsetund window.pageYOffsetfür bessere Ergebnisse.
Gyo
135

Die aktuell akzeptierte Antwort ist falsch - document.documentElement.scrollTopgibt in Chrome immer 0 zurück. Dies liegt daran, dass WebKit das bodyScrollen verfolgt, während Firefox und IE dies verwenden html.

Um die aktuelle Position zu erhalten, möchten Sie:

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

Sie können die aktuelle Position wie folgt auf 1000 Pixel einstellen:

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

Oder verwenden Sie jQuery (animieren Sie es, während Sie gerade dabei sind!):

$("html, body").animate({ scrollTop: "1000px" });
tobek
quelle
5
Die Antwort von gyo, die vorschlägt, window.pageYOffsetist sauberer, wenn Sie window.scrollBy()oder window.scrollTo()Methoden verwenden.
igorsantos07
32

Es gibt einige Inkonsistenzen bei der Anzeige der aktuellen Bildlaufkoordinaten durch Browser. Google Chrome auf Mac und iOS scheint 0bei Verwendung von document.documentElement.scrollTopoder jQuery's immer wieder zurückzukehren $(window).scrollTop().

Es funktioniert jedoch konsistent mit:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset
Gyo
quelle
Ich habe es auch bemerkt, ist es ein Fehler auf Mac und iOS?
Alexander Kim
@AlexanderKim Ich denke, es könnte damit zusammenhängen, wie bestimmte CSS-Regeln (wie Überlauf) interpretiert werden, und es wurde berichtet, dass es funktioniert, wenn scrollTop sowohl für das Body- als auch für das HTML-Element aktiviert wird. Um jedoch das Testen und Debuggen zu vermeiden, verlasse ich mich immer auf das sichere und konsistente pageXOffset / pageYOffset.
Gyo
Vielen
5

Ich habe mich für die lokale HTML5-Speicherlösung entschieden ... Alle meine Links rufen eine Funktion auf, die dies vor dem Ändern von window.location festlegt:

localStorage.topper = document.body.scrollTop;

und jede Seite hat dies im onLoad des Körpers:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }
AX Labs
quelle
3
Es wäre eleganter, setItem () und getItem () von localStorage zu verwenden und stattdessen die Bildlaufposition bei jedem Linkklick zu sichern und beim Verlassen der Seite einmal zu speichern: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});
StanE