Bagaimana cara mendapatkan dan mengatur posisi scroll halaman web saat ini?

121

Bagaimana saya bisa mendapatkan dan mengatur posisi gulir halaman web saat ini?

Saya memiliki formulir panjang yang perlu di-refresh berdasarkan tindakan / masukan pengguna. Ketika ini terjadi, halaman disetel ulang ke paling atas, yang mengganggu pengguna, karena mereka harus menggulir kembali ke bawah ke titik mereka berada.

Jika saya dapat menangkap posisi gulir saat ini (dalam input tersembunyi) sebelum halaman dimuat ulang, saya dapat mengaturnya kembali setelah dimuat ulang.

javascript html xyz
sumber
Bukankah formulir yang digerakkan oleh AJAX bukan cara yang lebih baik untuk mencegah efek tersebut (dan tentu saja menyediakan cadangan jika XHR tidak tersedia)? Pemuatan ulang halaman akan membuat halaman melompat ke atas dan kembali lagi, suatu kebiasaan yang dapat mengganggu.
Marcel Korpel

Jawaban:

118

Anda sedang mencari document.documentElement.scrollTopproperti.

SLaks
sumber
terima kasih, saya menemukan ini: artikel.sitepoint.com/article/javascript-from-scratch/6 dan memodifikasi getScrollingPosition()untuk menyimpan nilai dalam variabel tersembunyi. Kemudian di html dari halaman yang baru saya gunakan <body onLoad="window.scrollTo(x,y), di mana x dan y adalah nilai-nilai dari nilai tersembunyi!
xyz
46
Saya menemukan, setidaknya di Chrome pada Ubuntu, yang document.documentElement.scrollTopselalu mengembalikan 0. document.body.scrollTop, bagaimanapun, tampaknya berfungsi. Satu Firefox di Ubuntu, di sisi lain, kebalikannya benar - Anda mendapatkan 0 dengan bodydan jumlah yang benar dengan documentElement. Tahu apa yang memberi?
tobek
12
Jawaban ini tidak akurat karena scrollTopproperti tidak berfungsi di semua browser. Periksa window.pageXOffsetdan window.pageYOffsetuntuk hasil yang lebih baik.
gyo
135

Jawaban yang diterima saat ini salah - document.documentElement.scrollTopselalu mengembalikan 0 di Chrome. Ini karena WebKit digunakan bodyuntuk melacak pengguliran, sedangkan Firefox dan IE digunakan html.

Untuk mendapatkan posisi saat ini, Anda menginginkan:

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

Anda dapat mengatur posisi saat ini ke 1000px ke bawah halaman seperti ini:

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

Atau, menggunakan jQuery (buat animasi saat Anda melakukannya!):

$("html, body").animate({ scrollTop: "1000px" });
tobek
sumber
5
jawaban gyo, menyarankan window.pageYOffsetlebih bersih jika Anda menggunakan window.scrollBy()atau window.scrollTo()metode.
igorsantos07
32

Ada beberapa ketidakkonsistenan dalam cara browser mengekspos koordinat pengguliran jendela saat ini. Google Chrome di Mac dan iOS sepertinya selalu kembali 0saat menggunakan document.documentElement.scrollTopatau jQuery $(window).scrollTop().

Namun, ini bekerja secara konsisten dengan:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset
gyo
sumber
Saya juga menyadarinya, apakah ini bug di Mac dan iOS?
Alexander Kim
@AlexanderKim Saya pikir ini mungkin terkait dengan bagaimana aturan CSS tertentu (seperti overflow) diinterpretasikan, dan telah dilaporkan berfungsi jika memeriksa scrollTop pada elemen body dan html. Namun, untuk menghindari pengujian dan debugging, saya selalu mengandalkan pageXOffset / pageYOffset yang aman dan konsisten.
gyo
1
terima kasih banyak atas jawaban yang benar
Michael Paccione
5

Saya menggunakan solusi penyimpanan lokal HTML5 ... Semua tautan saya memanggil fungsi yang mengatur ini sebelum mengubah window.location:

localStorage.topper = document.body.scrollTop;

dan setiap halaman memiliki ini di onLoad tubuh:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }
AX Labs
sumber
3
Akan lebih elegan menggunakan setItem () dan getItem () dari localStorage dan sebagai gantinya mencadangkan posisi scroll pada setiap klik link, simpan sekali saat meninggalkan halaman: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});
StanE