Atur posisi gulir

107

Saya mencoba untuk mengatur posisi gulir pada halaman sehingga penggulung digulir sampai ke atas.

Saya rasa saya membutuhkan sesuatu seperti ini tetapi tidak berfungsi:

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

Ada ide?

Mike Rifgin
sumber

Jawaban:

178

Anda bisa menggunakan window.scrollTo(), seperti ini:

window.scrollTo(0, 0); // values are x,y-offset
Nick Craver
sumber
3
ini membuat hari saya, woohoooooo
ArifMustafa
51

Juga perlu diperhatikan window.scrollBy(dx,dy)( ref )

annakata
sumber
1
Ini sangat membantu
Jeff82
34

Perhatikan bahwa jika Anda ingin menggulir elemen alih-alih jendela penuh, elemen tidak memiliki metode scrollTodan scrollBy. Anda harus:

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;

Anda juga dapat meniru fungsi window.scrollTodan window.scrollByke semua elemen HTML yang ada di halaman web pada browser yang tidak mendukungnya secara asli :

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
});

sehingga Anda dapat melakukan:

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);

CATATAN: Object.definePropertydianjurkan, karena menambahkan properti secara langsung ke dalam prototypeadalah menghentikan kebiasaan buruk (Jika Anda melihatnya :-).

Jorge Fuentes González
sumber
Ini sangat membantu, terima kasih. Tetapi saya menemukan bahwa elemen memang memiliki metode 'scrollTo'. Lihat developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex
@Narvalex itulah yang dinyatakan paragraf kedua.
Jorge Fuentes González
Referensi yang saya tunjukkan menunjukkan bahwa fungsi-fungsi itu built-in. Tidak perlu mendefinisikan properti metode
bawaan
@Narvalex Oh, saya baru saja membaca "tidak punya", saya buruk. Saya harus menyatakan bahwa tidak semua browser memilikinya, meskipun saat ini sulit untuk menemukan browser seperti itu (seperti IE11).
Jorge Fuentes González
3

... Atau cukup ganti bodydengan documentElement:

document.documentElement.scrollTop = 0;
maxime schoeni
sumber