Stellen Sie die Bildlaufposition ein

107

Ich versuche, die Bildlaufposition auf einer Seite so einzustellen, dass der Bildlauf ganz nach oben gescrollt wird.

Ich glaube, ich brauche so etwas, aber es funktioniert nicht:

(function () { alert('hello'); document.body.scrollTop = 0; } ());

Irgendwelche Ideen?

Mike Rifgin
quelle

Antworten:

178

Sie können window.scrollTo()wie folgt verwenden:

window.scrollTo(0, 0); // values are x,y-offset
Nick Craver
quelle
3
das macht meinen Tag, woohoooooo
ArifMustafa
51

Auch erwähnenswert window.scrollBy(dx,dy)( ref )

Annakata
quelle
1
Dies war sehr hilfreich
Jeff82
33

Beachten Sie, dass Elemente nicht über die Methoden scrollTound verfügen, wenn Sie ein Element anstelle des vollständigen Fensters scrollen möchten scrollBy. Du solltest:

var el = document.getElementById("myel"); // Or whatever method to get the element

// To set the scroll
el.scrollTop = 0;
el.scrollLeft = 0;

// To increment the scroll
el.scrollTop += 100;
el.scrollLeft += 100;

Sie können auch die window.scrollTound window.scrollBy-Funktionen aller vorhandenen HTML-Elemente auf der Webseite in Browsern nachahmen, die dies nicht nativ unterstützen :

Object.defineProperty(HTMLElement.prototype, "scrollTo", {
    value: function(x, y) {
        el.scrollTop = y;
        el.scrollLeft = x;
    },
    enumerable: false
});

Object.defineProperty(HTMLElement.prototype, "scrollBy", {
    value: function(x, y) {
        el.scrollTop += y;
        el.scrollLeft += x;
    },
    enumerable: false
});

so können Sie tun:

var el = document.getElementById("myel"); // Or whatever method to get the element, again

// To set the scroll
el.scrollTo(0, 0);

// To increment the scroll
el.scrollBy(100, 100);

HINWEIS: Object.definePropertywird empfohlen, da das direkte Hinzufügen von Eigenschaften zu dem prototypeeine schlechte Angewohnheit ist (wenn Sie es sehen :-).

Jorge Fuentes González
quelle
Das war hilfreich, danke. Ich habe jedoch festgestellt, dass Elemente die Methode 'scrollTo' haben. Siehe developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex
@ Narvalex das ist, was der zweite Absatz sagt.
Jorge Fuentes González
Die Referenz, auf die ich hingewiesen habe, zeigt, dass diese Funktionen integriert sind. Es ist nicht erforderlich, Eigenschaften von integrierten Methoden zu definieren
Narvalex
@ Narvalex Oh, ich habe gerade "nicht haben" gelesen, mein schlechtes. Ich muss sagen, dass es damals nicht alle Browser haben, obwohl es heutzutage schwierig ist, einen solchen Browser (wie IE11) zu finden.
Jorge Fuentes González
3

... oder einfach ersetzen bodydurch documentElement:

document.documentElement.scrollTop = 0;
Maxime Schöni
quelle