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 .

— Bulan
sumber

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

— Ryan

165

Anda dapat melakukannya menggunakan metode scrollTop pada DOM ready :

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

— Menepuk
sumber

9

Tidak berfungsi di Safari. Tapi ini -> stackoverflow.com/a/18633915/102133 tidak.

— Ben

165

Untuk implementasi JavaScript sederhana :

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

Luaskan cuplikan

— ProfNandaa
sumber

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

— Ben
sumber

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

— xoxel
sumber

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

— jon3laze
sumber

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.

— Ankit
sumber

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

— Nauphal
sumber

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.

— harshes53
sumber

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

— DrPollit0
sumber

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.

— Daut
sumber

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

— Alex Bersenang-senang
sumber

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

— Nicobels
sumber