Question

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

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

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

我也浏览过很多网站，但没有任何对我有用的东西。请帮我解决这个问题。

感谢。

Answer 1

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

$(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确实这样做（您在大多数浏览器中将其设置为documentElement，而在其他浏览器上设置为body;最简单的方法是在两者上设置它）。此外，该值是一个数字（无px）。

但是你必须在合适的时间做到这一点，在页面重新加载后，可能在setTimeout之后或甚至在onload回调之后（你＆＃ 39;我需要尝试找出你网页上的哪些作品）。这是setTimeout示例：

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

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

Answer 3

创建此类行为不是一个很好的UI实践，如果要在切换复选框后立即通知服务器，则应尝试使用AJAX。或者，如果您希望将其他元素的响应作为一组发送到服务器，则只需使用html表单。

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

即使在使用javascript重新加载后仍保留滚动条位置

3 个答案: