Paksa posisi gulir halaman ke atas saat refresh halaman dalam HTML


129

Saya sedang membangun situs web yang saya terbitkan dengan div. Ketika saya me-refresh halaman setelah digulir ke posisi X, maka halaman tersebut dimuat dengan posisi gulir sebagai X.

Bagaimana saya bisa memaksa halaman untuk digulir ke atas di halaman refresh?

  • Apa yang bisa saya pikirkan adalah beberapa JS atau jQuery dijalankan sebagai onLoad()fungsi halaman untuk SET halaman gulir ke atas. Tetapi saya tidak tahu bagaimana saya bisa melakukan itu.

  • Pilihan yang lebih baik adalah jika ada beberapa properti atau sesuatu untuk memiliki halaman dimuat dengan posisi gulir sebagai default (yaitu di bagian atas) yang akan menjadi jenis seperti memuat halaman , daripada me-refresh halaman .


Anehnya, tidak ada solusi di sini yang berfungsi untuk saya, tetapi yang ini berhasil: stackoverflow.com/a/11486546/470749
Ryan

Jawaban:



165

Untuk implementasi JavaScript sederhana :

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}


1
Ini jawaban yang benar. Solusi jQuery tidak berfungsi di semua kasus.
Harry Stevens

@ Paul12_ - Saya baru mengujinya Safari 11.0.3dan berfungsi baik untuk saya, yang mana yang Anda gunakan?
ProfNandaa

Ini tidak berhasil untuk saya. Saya harus kembali dari fungsi onbeforeload untuk membuatnya berfungsi.
Iqbal

@Iqbal - apa yang kamu lakukan return?
ProfNandaa

1
menambahkan document.querySelector('html').style.scrollBehavior = '';mungkin juga diperlukan. Jika disetel ke smooth, itu mungkin tidak sampai ke atas sebelum halaman dimuat ulang.
kevnk

35

Jawabannya di sini tidak berfungsi untuk safari, dokumen. Sudah sering dipecat terlalu dini.

Seharusnya menggunakan beforeunloadacara yang mencegah Anda dari melakukan beberapasetTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});

1
Tambahkan setelah fungsi gulir: $ ('html'). Text (''); , jadi kereta dorong akan diatur ulang
user956584

1
@ Kata sandi kata sandi Jangan Anda pikir $ ("html"). Hapus () akan lebih baik?
Ben

18

Sekali lagi, jawaban terbaik adalah:

window.onbeforeunload = function () {
    window.scrollTo(0,0);
};

(itu untuk non-jQuery, cari jika Anda mencari metode JQ)

SUNTING: sedikit kesalahan "onbeforunload" :) Chrome dan browser lainnya "ingat" posisi gulir terakhir sebelum bongkar, jadi jika Anda menetapkan nilainya menjadi 0,0 tepat sebelum bongkar halaman Anda, mereka akan mengingat 0,0 dan menang gulir kembali ke tempat scrollbar itu :)


@ Paul12_ Safari document.documentElement.scrollTopharus bekerja. Saya biasanya menggunakan keduanya.
Graham O'Mahony

9

Periksa .scrollTop()fungsi jQuery di sini

Itu akan terlihat seperti

$(document).load().scrollTop(0);

9

Anda juga bisa mencoba

$(document).ready(function(){
    $(window).scrollTop(0);
});

Jika Anda ingin menggulir pada posisi x daripada Anda dapat mengubah nilai 0 ke x.


7

Alih-alih location.reload(), cukup gunakan location.href = location.href. Itu tidak akan menggulir ke posisi sebelumnya seperti location.reload()halnya.

Catatan: Ini tidak akan dimuat ulang jika ada # di URL


4
<script> location.hash = (location.hash) ? location.hash : " "; </script>

Masukkan skrip di atas dalam <head>tag html Anda. Tidak yakin bagaimana perilaku satu halaman aplikasi! Tapi pasti berfungsi seperti pesona di halaman biasa.


4

Jawabannya di sini (menggulir ke dalam $(document).ready) tidak berfungsi jika ada video di halaman tersebut. Dalam hal ini halaman digulir setelah acara ini dipecat, menimpa pekerjaan kami.

Jawaban terbaik seharusnya:

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});

3
$(document).ready(function(){
    $(window).scrollTop(0);
});

tidak berfungsi untuk saya karena google chrome hanya akan menggulir ke bawah setelah halaman selesai memuat. Apa yang saya gunakan adalah

$(document).ready(function() {
    var url = window.location.href;
    console.log(url);
    if( url.indexOf('#') < 0 ) {
        window.location.replace(url + "#");
    } else {
        window.location.replace(url);
    }
});

// Ini memuat halaman dengan # di bagian akhir. Jadi itu akan selalu memuat di atas.


3

Untuk mengatur ulang gulir jendela kembali ke atas, $(window).scrollTop(0)dalam acara beforeunload melakukan trik, namun, saya menguji di Chrome 80 itu akan kembali ke lokasi lama setelah memuat ulang.

Untuk mencegahnya, atur history.scrollRestorationke "manual".

//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
      $(window).scrollTop(0);
});

Ini adalah respons terbaik bagi saya, bekerja di Chrome / Linux
SNS - Web et Informatique

0

Jawaban supercalifragilisticexpialidocious adalah:

tambahkan ini di bagian atas file js atau tag skrip Anda

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari
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.