Cegah gulir browser otomatis saat menyegarkan

Jika Anda membuka halaman a dan menggulirnya, maka segarkan halaman tersebut akan disegarkan di tempat Anda meninggalkannya. Ini bagus, namun ini juga terjadi pada halaman yang memiliki lokasi jangkar di url. Contohnya adalah jika Anda mengklik link http://example.com/post/244#comment5dan menyegarkan halaman setelah melihat sekeliling, Anda tidak akan berada di jangkar dan halaman melompat-lompat. Apakah ada cara untuk mencegahnya dengan javascript? Sehingga tidak peduli apa pun Anda akan selalu menavigasi ke jangkar.

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

Pada dasarnya, jika jangkar digunakan, kami mengikat ke acara gulir jendela. Idenya adalah bahwa acara gulir pertama harus termasuk dalam pemosisian ulang otomatis yang dilakukan oleh browser. Ketika ini terjadi, kami melakukan reposisi kami sendiri dan kemudian menghapus acara terikat. Hal ini untuk mencegah gulungan halaman berikutnya mengganggu 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");
        });
    }

});

Di Chrome, meskipun Anda memaksa scrollTop ke 0, ini akan melompat setelah acara scroll pertama.

Anda harus mengikat gulungan ke ini:

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

Jadi browser tertipu untuk percaya bahwa itu di awal sebelum refresh.

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

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

Itu tidak didukung oleh IE. Kompatibilitas browser.

Setelah beberapa kali gagal akhirnya saya berhasil melakukan trik tersebut. anzo benar di sini karena penggunaan beforeunloadakan membuat halaman melompat ke atas saat pengguna memuat ulang halaman atau mengklik link. Begitu unloadjuga 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 unloadacara.

Berikut pendekatan yang lebih umum. Alih-alih mencoba mencegah browser menggulir (atau melompat ke atas sebagaimana tampilannya), saya hanya mengembalikan posisi sebelumnya pada halaman. Yaitu saya merekam y-offset halaman saat ini di localStorage dan menggulir ke posisi ini setelah halaman 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
}

Anda bisa meletakkan # di akhir sehingga halaman akan dimuat di bagian atas.

Bekerja di semua browser, 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 akhir.

Ini berhasil untuk saya.

    //Reset scroll top

    history.scrollRestoration = "manual"

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

Kamu harus bisa.

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

Ini harus menggulir halaman ke elemen yang diinginkan.