Question

我正在寻找一种解决方案，在我的网页重新加载后，我的网页不应滚动到顶部。

与ex相同：我在我的网站的产品详情页面中选择了一些过滤器，因为页面重新加载，页面加载页面滚动到顶部。

有没有办法可以在页面加载时停止页面滚动到顶部。

我能想到的一个解决方案是读取当前滚动位置并在页面重新加载时设置滚动位置。

是否有其他使用javascript的解决方案，以便我避免这种行为。

Answer 1

您可以使用AJAX加载已过滤的数据并将其附加到您的网页。当您离开页面时，您不必担心滚动重置，因为您根本不会离开它。您只是要添加新数据（或删除旧数据）。但是，这可能需要对代码进行返工。

如果您对AJAX灵魂感兴趣，可以阅读this和that。

Answer 2

如果你想在页面重新加载之前精确滚动到最后一个滚动位置，我认为唯一的解决方案是将window.pageYOffset存储在本地/会话存储中。

如果您只想滚动到产品列表的顶部，可以执行以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

在Chrome中，我对此代码有点疑问。我必须将window.scrollTo(...)放入setTimeout()

当用户更新过滤器时，您还可以考虑使用XHR调用刷新产品列表。

有没有办法我可以确保我的html页面总是不会向上滚动（即window.scrollTo（0,0））页面重新加载使用JavaScript

2 个答案: