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?

Jawaban:




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 :-).


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;
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.