Geçerli web sayfası kaydırma konumu nasıl alınır ve ayarlanır?

121

Geçerli web sayfası kaydırma konumunu nasıl alabilirim ve ayarlayabilirim?

Kullanıcı eylemlerine / girdilerine göre yenilenmesi gereken uzun bir formum var. Bu olduğunda, sayfa en üste sıfırlanır ve bu da kullanıcılar için can sıkıcıdır, çünkü bulundukları noktaya geri dönmeleri gerekir.

Sayfa yeniden yüklenmeden önce mevcut kaydırma konumunu (gizli bir girişte) yakalayabilirsem, yeniden yükledikten sonra yeniden ayarlayabilirim.

javascript html

— xyz
kaynak

AJAX güdümlü bir form, bu etkileri önlemenin daha iyi bir yolu değil midir (ve tabii ki XHR'nin kullanılamaması durumunda bir geri dönüş sağlar)? Sayfa yeniden yüklemelerinde sayfanın en üste atlayıp tekrar geri dönmesi can sıkıcı olabilir.

— Marcel Korpel

118

document.documentElement.scrollTopMülkü arıyorsunuz .

— SLaks
kaynak

teşekkürler, bunu buldum: makaleler.sitepoint.com/article/javascript-from-scratch/6 ve getScrollingPosition()değerleri gizli değişkenlerde saklamak için değiştirdim . Sonra, kullandığım yenilenmiş sayfanın html'sinde <body onLoad="window.scrollTo(x,y), burada x ve y gizli değerler değerlerinden olanlar!

— xyz

46

En azından Ubuntu'daki Chrome'da bunun document.documentElement.scrollTopher zaman 0 döndürdüğünü buluyorum, document.body.scrollTopancak işe yarıyor gibi görünüyor. Öte yandan Ubuntu'da bir Firefox, bunun tersi doğrudur - ile 0 alırsınız bodyve ile doğru miktar alırsınız documentElement. Ne verir bir fikriniz var mı?

— tobek

12

scrollTopÖzellik tüm tarayıcılarda çalışmadığından bu yanıt doğru değildir. Kontrol edin window.pageXOffsetve window.pageYOffsetdaha iyi sonuçlar için.

— gyo

135

Şu anda kabul edilen cevap yanlış - document.documentElement.scrollTopChrome'da her zaman 0 değerini döndürür. Bunun nedeni, WebKit'in bodykaydırmayı takip etmek için kullanması, Firefox ve IE'nin kullanılmasıdır html.

Mevcut pozisyonu almak için şunları istiyorsunuz:

document.documentElement.scrollTop || document.body.scrollTop

Mevcut konumu aşağıdaki gibi 1000px olarak ayarlayabilirsiniz:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

Ya da jQuery kullanarak (oradayken onu canlandırın!):

$("html, body").animate({ scrollTop: "1000px" });

— tobek
kaynak

5

Gyo'nun cevabı, window.pageYOffseteğer kullanıyorsanız window.scrollBy()veya window.scrollTo()yöntemler kullanıyorsanız daha temiz olduğunu öne sürüyor .

— igorsantos07

32

Tarayıcıların mevcut pencere kaydırma koordinatlarını nasıl ortaya çıkardığı konusunda bazı tutarsızlıklar vardır. Mac ve iOS'taki Google Chrome , veya jQuery kullanırken her zaman geri dönüyor gibi görünüyor .0document.documentElement.scrollTop$(window).scrollTop()

Ancak, aşağıdakilerle tutarlı bir şekilde çalışır:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

— gyo
kaynak

Ben de fark ettim, Mac ve iOS'ta bir hata mı?

— Alexander Kim

@AlexanderKim Bazı CSS kurallarının (taşma gibi) nasıl yorumlandığıyla ilgili olabileceğini düşünüyorum ve hem gövde hem de html öğelerinde scrollTop'u kontrol ederken çalıştığı bildirildi. Bununla birlikte, test ve hata ayıklamadan kaçınmak için her zaman güvenli ve tutarlı pageXOffset / pageYOffset'e güveniyorum.

— gyo

1

doğru cevap için çok teşekkürler

— Michael Paccione

5

HTML5 yerel depolama çözümüne gittim ... Tüm bağlantılarım, window.location değiştirmeden önce bunu ayarlayan bir işlev çağırıyor:

localStorage.topper = document.body.scrollTop;

ve her sayfada, gövdenin Yükleniyor kısmında bu bulunur:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

— AX Labs
kaynak

3

LocalStorage'ın setItem () ve getItem () işlevini kullanmak ve bunun yerine kaydırma konumunu her bağlantı tıklamasında yedeklemek, sayfadan çıkarken bir kez depolamak daha zarif olacaktır: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});

— StanE