即使在使用javascript重新加载后，也要保留滚动条的位置

Retain scrollbar position even after reloading using javascript

本文关键字：滚动条 位置 保留 加载 javascript 新加载      更新时间：2023-09-26

我有一个要求，如果我点击复选框，就会提交值，从而重新加载页面。现在，要点击另一个复选框，我需要再次向下滚动，这不是一个更好的主意。所以，现在我想保留我的滚动条位置，即使页面被重新加载。javascript中有什么方法可以做到这一点吗？我试过下面的代码，但没有成功。

<input type="checkbox" onclick="myFunction()"/> One <br/>
function myFunction() {
         document.body.scrollTop = 500px;
        }

我也浏览了很多网站，但对我来说什么都不起作用。请帮我解决这个问题。

谢谢。

您可以使用会话存储来存储位置，然后在重新加载页面时返回到该位置，如下所示：

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

这是JSFiddle演示

设置scrollTop确实可以做到这一点（在大多数浏览器中，您在documentElement上设置它，但在其他浏览器中，在body上设置它；最简单的方法是在两者上都设置它）。此外，该值是一个数字（无px）。

但您必须在正确的时间执行，也就是页面重新加载后的，可能在setTimeout之后，甚至在onload回调中（您需要进行实验以确定哪一个在您的页面上有效）。以下是setTimeout示例：

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

但是，我不会那样做。相反，我会通过ajax提交复选框值，而不重新加载页面。即使你在重新加载后向下滚动到用户所在的位置，当你选中一个框时，页面重新加载仍然是一个惊喜（我记得亚马逊过去是怎么做的），这需要时间。Ajax会让它在后台发生，而不会干扰用户。

创建这样的行为不是一个好的UI实践，如果您想在切换复选框后立即通知服务器，则应该尝试使用AJAX。如果您希望将其他元素的响应作为一组发送到服务器，也可以简单地使用html表单。

以防万一，如果您仍然想实现该功能，则上述代码将不起作用，因为页面一重新加载，整个dom就会重新加载。这仍然可以使用cookie或本地存储来实现，您可以在其中设置滚动的标志或值（整数）。在页面加载时，检查是否有任何值设置为该特定cookie或localStorage变量，然后滚动到给定值请注意，就UI而言，这是一种非常糟糕的做法。我强烈建议您使用ajax或使用表单一起提交值。

相关文章：