有沒有一種方法，我可以確保我的HTML頁面始終不會向上滾動（即window.scrollTo（0,0））頁面刷新使用javascript

Question

我正在尋找一個解決方案，我的頁面不應該滾動到頂部總是在我的頁面重新加載之後。

贊成例如：我在我的網站產品列表頁面，我選擇了一些過濾器，因爲哪個頁面重新加載，並在頁面加載頁面上滾動到頂部。

有沒有辦法阻止頁面滾動到頁面加載頂部。

我能想到的一個解決方案是讀取當前的滾動位置並在頁面重新加載時設置滾動位置。

是否有任何其他解決方案使用JavaScript，以便我避免這種行爲。

Answer 1

您可以使用AJAX加載過濾的數據並將其附加到您的頁面。當你離開頁面時，你不必擔心滾動重置，因爲你根本不會離開它。你只是要添加新的數據（或刪除舊數據）。不過，這可能需要對代碼進行返工。

如果你對AJAX靈魂感興趣，你可以閱讀this和that。

Answer 2

如果你想在頁面重新載入前精確地滾動到最後一個滾動位置，我認爲唯一的解決方案是將window.pageYOffset存儲在本地/會話存儲等內容中。

如果你只是想滾動到產品列表的頂部，你可以做這樣的事情：

const productsList = document.querySelector(".js-products-list"); 
 
const productsListOffsetTop = productsList.offsetTop; 
 

 
window.scrollTo(0, productsListOffsetTop);

<div class="ProductsList js-products-list"> 
 
    <!-- the products --> 
 
</div>

在Chrome中，我有一個小問題，與此代碼。我必須將window.scrollTo(...)放入setTimeout()

您也可以考慮在用戶更新過濾器時使用XHR呼叫刷新產品列表。