HTML'de sayfa yenilendiğinde sayfa kaydırma konumunu en üste zorla

129

divS ile yayınladığım bir web sitesi kuruyorum . X konumuna kaydırıldıktan sonra sayfayı yenilediğimde, sayfa kaydırma konumu X olarak yüklenir.

Sayfa yenilemede sayfanın en üste kaydırılmasını nasıl zorlayabilirim?

Ne Aklıma gibi bazı JS veya jQuery çalışmasının olduğu onLoad()için sayfanın fonksiyonu SET sayfaları üstüne gidin. Ama bunu nasıl yapabilirim bilmiyorum.
Sayfanın varsayılan olarak (yani en üstte) kaydırma konumu ile yüklenmesi için bir özellik veya başka bir şey olması daha iyi bir seçenek olabilir; bu, sayfa yenileme yerine bir tür sayfa yüklemesi gibidir .

— Ay
kaynak

Şaşırtıcı bir şekilde, buradaki çözümlerden hiçbiri benim için işe yaramadı, ancak bu işe yaramadı: stackoverflow.com/a/11486546/470749

— Ryan

165

Bunu DOM hazırda scrollTop yöntemini kullanarak yapabilirsiniz :

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

— basmakalıp
kaynak

9

Safari'de çalışmıyor. Ancak bu -> stackoverflow.com/a/18633915/102133 yapar.

— Ben

166

Basit ve sade bir JavaScript uygulaması için:

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

Snippet'i genişlet

— ProfNandaa
kaynak

1

Bu doğru cevap. JQuery çözümü her durumda çalışmaz.

— Harry Stevens

@ Paul12_ - Sadece test ettim Safari 11.0.3ve benim için iyi çalışıyor, hangisini kullanıyorsun?

— ProfNandaa

Bu benim için işe yaramadı. Çalışması için onbeforeload işlevinden dönmek zorunda kaldım.

— Iqbal

@Iqbal - ne yaptın return?

— ProfNandaa

1

eklemek document.querySelector('html').style.scrollBehavior = '';de gerekli olabilir. Olarak ayarlanmışsa smooth, sayfa yeniden yüklenmeden önce en üste çıkmayabilir.

— kevnk

35

Buradaki cevap safari için işe yaramıyor, belge. Zaten genellikle çok erken ateşleniyor.

Bir şeyler yapmanı beforeunloadengelleyen olayı kullanmalısınsetTimeout

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

— Ben
kaynak

1

Kaydırma işlevinden sonra ekle: $ ['html']. Text (''); , böylece bebek arabası sıfırlanacak

— user956584

1

@Userpassword $ ("html"). Remove () 'in daha iyi olacağını düşünmüyor musunuz?

— Ben

18

Yine, en iyi cevap şudur:

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

(jQuery olmayanlar için, JQ yöntemini arıyorsanız bakın)

DÜZENLEME: küçük bir hata, "onbeforunload" :) Chrome ve diğer tarayıcılar, yüklemeden önce son kaydırma konumunu "hatırlar", bu nedenle, değeri, sayfanızın boşaltılmasından hemen önce 0,0 olarak ayarlarsanız 0,0'ı hatırlar ve kazanır Kaydırma çubuğunun olduğu yere geri kaydırın :)

— xoxel
kaynak

@ Paul12_ Safari document.documentElement.scrollTopçalışması gerekir . Genelde ikisini de kullanırım.

— Graham O'Mahony

9

JQuery .scrollTop()işlevini buradan kontrol edin

Bir şeye benzeyecekti

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

— jon3laze
kaynak

9

Ayrıca deneyebilirsin

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

X konumunda kaydırmak istiyorsanız, 0 değerini x olarak değiştirebilirsiniz.

— Ankit
kaynak

7

Bunun yerine location.reload(), sadece kullanın location.href = location.href. Yaptığı gibi önceki konuma kaydırılmayacaktır location.reload().

Not: URL'de # varsa bu yeniden yüklenmez

— Nauphal
kaynak

4

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

Yukarıdaki komut dosyasını <head>html'nizin etiketine koyun . Tek sayfalı uygulamaların nasıl davrandığından emin değilim! Ama normal sayfalarda kesinlikle cazibe gibi çalışıyor.

— harshes53
kaynak

4

Cevap burada (içeri kaydırarak $(document).readySayfada bir video varsa buradaki ) işe yaramaz. Bu durumda, bu olay tetiklendikten sonra sayfa kaydırılır ve bizim çalışmamızı geçersiz kılar.

En iyi cevap şu olmalıdır:

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

— DrPollit0
kaynak

3

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

google chrome sayfanın yüklenmesi bittikten sonra aşağı kaydıracağından benim için işe yaramadı. Ne kullandım

$(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. Böylece her zaman en üstte yüklenecektir.

— Daut
kaynak

3

Pencereyi sıfırlamak için en üste geri dönün $(window).scrollTop(0), yükleme öncesi olayında püf noktaları var, ancak Chrome 80'de test ettim, yeniden yüklemeden sonra eski konumuna geri dönecek.

Bunu önlemek için, set history.scrollRestorationiçin "manual".

//Reset scroll top

history.scrollRestoration = "manual";

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

— Alex Eğleniyor
kaynak

Bu benim için en iyi yanıt, Chrome / Linux'ta çalışıyor

— SNS - Web et Informatique

0

Süperkalifragilisticexpialidocious cevap:

bunu js dosyanızın veya komut dosyası etiketinizin en üstüne ekleyin

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

document.body.scrollTop = 0; // For Safari

— Nicobels
kaynak