保留滾動條位置，即使重新加載後使用javascript

我有要求，如果我點擊複選框的價值被提交，因此頁面被重新加載。現在，點擊另一個複選框，我需要再次向下滾動，這不是一個好主意。所以，現在我想保留我的滾動條位置，即使頁面重新加載後。在JavaScript中有任何方法來做到這一點？我已經嘗試了下面的代碼，但沒有運氣。保留滾動條位置，即使重新加載後使用javascript

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

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

我也瀏覽過很多網站，但沒有爲我工作。請幫我解決這個問題。

謝謝。

來源

2015-12-14 Shruthi Sathyanarayana

我覺得這個設計一般不好。改爲使用AngularJS或jQuery ajax，並在後臺提交。可能有一種方法可以將其存儲在Cookies中，但這不是一個好的解決方案。 – ehsan88

你可以在你的複選框的容器中添加一個'id'，並在重新加載頁面時，附加'＃container_id'到URL – Akshay

@Akshay，我有我的複選框。但如何將其附加到URL？ –

您可以使用會話存儲存儲位置，然後回到位置時重新加載頁面，像這樣：

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

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

Here is the JSFiddle demo

來源

2015-12-14 07:18:57

@ AHS N，感謝您的回覆。但上面的代碼不適合我。它不會達到500px的位置。我應該做些什麼？ –

@ShruthiSathyanarayana加入[在這裏聊天]（http://chat.stackoverflow.com/rooms/97832/retain-scrollbar-position），讓我們解決你的問題:) –

代碼正在工作。謝謝：）。但如果我使用該代碼，日曆圖標不會彈出。 –

設置scrollTop這樣做（在大多數瀏覽器中，您將其設置爲documentElement，但在其他設備上設置爲body;最簡單的方法是在兩者上都設置它）。此外，該值是一個數字（沒有px）。

但是你必須在正確的時間，這是後的頁面重新加載了，可能是setTimeout後，甚至在onload回調做它（你需要通過實驗來找出哪些作品在頁面上）。下面是setTimeout例如：

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

然而，我不會那樣做。相反，我會通過ajax提交複選框的值，而不是重新加載頁面。即使你向下滾動到重新加載後的用戶位置，當你檢查一個盒子時（我記得亞馬遜曾經這樣做過），頁面重新加載仍然是一個驚喜，而且這需要時間。 Ajax會讓它在後臺進行而不會中斷用戶。

來源

2015-12-14 07:08:44

現在不需要從onClick調用這個函數嗎？ –

@ShruthiSathyanarayana：不，在用戶點擊複選框時設置滾動不會有幫助，如果您要刷新頁面，則不會有幫助。 –

感謝您的回覆。我剛纔嘗試了上面的代碼。但其得到儘快重新裝入我的網頁是開放的，而不是當我點擊複選框。 –

它不會是一個很好的用戶界面的做法創建這樣的行爲，如果您希望在複選框切換後立即通知服務器，則應嘗試使用AJAX。或者，如果您希望將其他元素的響應作爲一堆發送到服務器，則只需使用html表單即可。爲了以防萬一，如果你還想實現這個功能，你的上面的代碼將不起作用，因爲只要頁面重新加載，整個dom就會重新加載。這仍然可以通過使用cookie或localstorage來實現，您可以在其中設置標誌或值（以整數形式）進行滾動。在頁面加載時，檢查是否有任何值設置爲特定的cookie或localStorage變量，然後滾動到給定的值。 請注意，在UI方面這是一個非常糟糕的做法。我強烈建議您使用ajax或使用表單將值一起提交。

來源

2015-12-14 07:20:03 Ankit

保留滾動條位置，即使重新加載後使用javascript

回答

相關問題