Yenilemede otomatik tarayıcı kaydırmasını önleyin

Bir sayfaya a gidip etrafta gezinirseniz, sayfayı yenilediğinizde bıraktığınız yerde yenilenir. Bu harika, ancak bu, url'de bir bağlantı konumu bulunan sayfalarda da görülür. Bir örnek olarak, bir bağlantıya tıkladığınızda http://example.com/post/244#comment5ve etrafınıza baktıktan sonra sayfayı yenilerseniz, bağlantıda olmayacaksınız ve sayfa zıplar. JavaScript ile bunu önlemenin bir yolu var mı? Böylece ne olursa olsun her zaman çapaya gideceksin.

Tarayıcı davranışındaki değişiklikler nedeniyle bu çözüm artık önerilmemektedir. Diğer cevaplara bakın.

Temel olarak, bir çapa kullanılırsa, windows kaydırma olayına bağlanırız. Buradaki fikir, ilk kaydırma olayının tarayıcı tarafından yapılan otomatik yeniden konumlandırmaya ait olması gerektiğidir. Bu gerçekleştiğinde, kendi yeniden konumlandırmamızı yaparız ve ardından bağlı olayı kaldırırız. Bu, sonraki sayfa kaydırmalarının sistemde çalışmasını engeller.

$(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");
        });
    }

});

Chrome'da, scrollTop'u 0'a zorlasanız bile, ilk kaydırma olayından sonra atlayacaktır.

Parşömeni şuna bağlamalısınız:

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

Böylece tarayıcı, yenilemeden önce başlangıçta olduğuna inanacak şekilde kandırılır.

Otomatik kaydırma geri yüklemesini devre dışı bırakmak için bu etiketi baş bölümüne eklemeniz yeterlidir.

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

IE tarafından desteklenmemektedir. Tarayıcı Uyumluluğu.

Birkaç başarısızlıktan sonra nihayet hile yapmayı başardım. anzo burada doğrudur, çünkü beforeunloadkullanımı bir kullanıcı sayfayı yeniden yüklediğinde veya bir bağlantıyı tıkladığında sayfanın en üste atlamasını sağlayacaktır. Bunu unloadyapmanın açık yolu da öyle.

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

Javascript yolu (Teşekkürler ProfNandaa ):

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

DÜZENLEME: 16/07/2015

Atlama sorunu, unloadetkinlikte bile Firefox'ta hala var .

İşte daha genel bir yaklaşım. Tarayıcının kaymasını (veya göründüğü gibi üste atlamasını) engellemeye çalışmak yerine, sayfadaki önceki konumu geri yüklerim. Yani, sayfanın geçerli y-ofsetini localStorage'a kaydediyorum ve sayfa yüklendikten sonra bu konuma kaydırıyorum.

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
}

Sayfanın en üste yüklenmesi için sonuna bir # koyabilirsiniz.

Çok basit olduğu için mobil ve masaüstü tüm tarayıcılarda çalışır.

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

});

// Bu, sayfayı sonunda bir # ile yükler.

Bu benim için çalışıyor.

    //Reset scroll top

    history.scrollRestoration = "manual"

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

Yapabilmelisin.

Yüklendiğinde, window.location.hashbir değer olup olmadığını kontrol edin . Varsa, karma değeriyle eşleşen bir kimliğe sahip öğeyi alın. Öğenin konumunu bulun (offsetTop / offsetLeft'e özyinelemeli çağrılar) ve ardından bu değerleri window.scrollTo(x, y)yönteme geçirin .

Bu, sayfayı istenen öğeye kaydırmalıdır.