javascript

Question

kullanarak yeniden yükledikten sonra bile kaydırma çubuğu konumunu koru. Bir onay kutusunu tıklatırsam değerin gönderilmesini ve böylece sayfanın yeniden yüklenmesini gerektirir. Şimdi, başka bir onay kutusunu tıklamak için, daha iyi bir fikir olmayan tekrar aşağı kaydırmam gerekiyor. Şimdi, sayfa yeniden yüklendikten sonra bile kaydırma çubuğu konumumu korumak istiyorum. Javascript'te bunu yapmak için herhangi bir yöntem var mı? Aşağıdaki kodu denedim, ama şans yoktu.

<input type="checkbox" onclick="myFunction()"/> One <br/> 

function myFunction() { 
     document.body.scrollTop = 500px; 
     } 

Ayrıca birçok web sitesine göz attım ama hiçbir şey benim için işe yaramadı. Lütfen bu konuda bana yardımcı olun.

Teşekkürler.

Answer 1

Böyle ardından konumunu kaydetmek sayfa tekrar yüklendiğinde geri pozisyona almak için oturum depolamasını kullanabilirsiniz:

$(window).scroll(function() { 
    sessionStorage.scrollTop = $(this).scrollTop(); 
}); 

$(document).ready(function() { 
    if (sessionStorage.scrollTop != "undefined") { 
    $(window).scrollTop(sessionStorage.scrollTop); 
    } 
}); 

Here is the JSFiddle demo

Answer 2

scrollTop ayarı bunu yapar (çoğu tarayıcıda documentElement'a ayarlarsınız, ancak diğerlerine body'dan itibaren; en basit şey, her ikisine de ayarlamanızdır). Ayrıca, değer bir sayıdır (px).

Ama sayfa muhtemelen bir setTimeout sonra veya hatta bir onload geri aramasında, yeniden etmiştir sonradır doğru zamanda, bunu yapmak zorunda (sayfanızda hangisinin anlamaya deneme yapmak gerekir).

setTimeout(function() { 
    document.documentElement.scrollTop = 
     document.body.scrollTop = 500; 
}, 0); 

Ancak

, ben bunu yapmazdım: İşte setTimeout örnek. Bunun yerine, onay kutusunu ajax üzerinden gönderir ve sayfayı yeniden yüklemezdim. Kullanıcının yeniden yüklendikten sonra yere inmesine rağmen, bir kutuyu işaretlediğinizde sayfanın yeniden yüklenmesi sürpriz olur (Amazon'un bunu yapmak için kullandığını hatırlıyorum) ve zaman alır. Ajax, kullanıcıyı kesintiye uğratmadan arka planda olmasına izin verirdi.

Answer 3

Bu alışkanlık için iyi bir UI uygulama olabilir Böyle bir davranış oluşturduğunuzda, onay kutusu işaretlendiğinde sunucuyu bilgilendirmek isterseniz AJAX kullanmayı denemelisiniz. Ya da sunucuya bir demet olarak diğer elemanların yanıtını göndermek istiyorsanız, sadece html formunu kullanın.

Yine de, eğer hala işlevselliği sağlamak istiyorsanız, sayfa yeniden yüklendiği anda, tüm dom yeniden yüklenir, yukarıdaki kod çalışmaz. Bu, yine de, kaydırma için bir bayrak veya değer (tamsayı) olarak ayarlayabileceğiniz çerez veya localstorage kullanılarak gerçekleştirilebilir. Sayfa yüklendiğinde, belirli bir çerez veya localStorage değişkenine herhangi bir değerin ayarlandığını kontrol edin ve ardından verilen değere kaydırın. Lütfen bunun UI açısından çok kötü bir uygulama olduğunu unutmayın. Ajax kullanmanız veya değerleri bir form kullanarak birlikte göndermenizi önemle tavsiye ederim.