Pertanyaan Mencegah peramban otomatis gulir saat disegarkan


Jika Anda membuka halaman dan menggulir ke sekeliling, segarkan laman akan menyegarkan di tempat Anda meninggalkannya. Ini bagus, namun ini juga terjadi pada halaman di mana ada lokasi jangkar di url. Contohnya adalah jika Anda mengeklik tautan http://example.com/post/244#comment5 dan menyegarkan halaman setelah melihat sekeliling Anda tidak akan di anchor dan halaman melompat-lompat. Apakah ada cara untuk mencegah hal ini dengan javascript? Sehingga tidak masalah-apa yang akan selalu Anda arahkan ke jangkar.


75
2017-08-12 03:35


asal


Jawaban:


Solusi ini tidak lagi disarankan karena perubahan dalam perilaku browser. Lihat jawaban lainnya.

Pada dasarnya, jika anchor digunakan kita mengikat ke acara windows scroll. Idenya adalah bahwa acara gulir pertama harus menjadi milik reposisi otomatis yang dilakukan oleh browser. Ketika ini terjadi kita melakukan reposisi diri kita sendiri dan kemudian menghapus peristiwa yang terikat. Ini mencegah gulungan halaman berikutnya dari borking sistem.

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

15
2017-08-12 04:46



Di Chrome, meskipun Anda memaksakan scrollTop ke 0, maka lompat setelahnya setelah acara gulir pertama.

Anda harus mengikat gulir ke ini:

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

Jadi browser ditipu untuk percaya bahwa itu adalah pada awal sebelum penyegaran.


126
2017-09-05 10:30



Untuk menonaktifkan restorasi gulir otomatis, cukup tambahkan tag ini ke bagian kepala.

<script>history.scrollRestoration = "manual"</script>

Itu tidak didukung oleh IE. Kompatibilitas browser.


22
2017-10-13 04:42



Setelah sejumlah kegagalan akhirnya saya berhasil melakukan trik. anzo benar di sini karena menggunakan beforeunload akan membuat laman lompat ke atas saat pengguna memuat ulang halaman atau mengeklik tautan. Begitu unload adalah cara yang jelas untuk melakukan ini.

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

Cara Javascript (Terima kasih ProfNandaa):

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

EDIT: 16/07/2015

Masalah lompatan masih ada dengan Firefox bahkan dengan unload peristiwa.


15
2017-07-06 12:47



Anda cukup menaruh # di bagian akhir sehingga halaman akan dimuat di bagian atas.

Berfungsi pada semua peramban, seluler dan desktop, karena sangat sederhana.

$(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.


3
2017-08-18 09:59



Berikut ini pendekatan yang lebih umum. Alih-alih mencoba untuk mencegah browser dari bergulir (atau melompat ke atas karena akan terlihat seperti) saya hanya mengembalikan posisi sebelumnya pada halaman. Yaitu. Saya sedang merekam y-offset halaman saat ini di localStorage dan gulir ke posisi ini setelah halaman telah dimuat.

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

2
2018-03-05 15:25



Kamu harus bisa.

Onload, periksa apakah window.location.hash memiliki nilai. Jika ya, ambil elemen dengan id yang cocok dengan nilai hash. Temukan posisi elemen (panggilan rekursif ke offsetTop / offsetLeft) dan kemudian meneruskan nilai-nilai tersebut ke dalam window.scrollTo(x, y) metode.

Ini harus menggulir halaman ke elemen yang diinginkan.


-1
2017-08-12 03:44