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.