使用JavaScript保留滚动条位置，即使重新加载页面

Question

我有一个需求，即如果我点击复选框，则该值将被提交，因此页面将重新加载。现在，要再次单击另一个复选框，我需要再次滚动，这不是一个更好的想法。因此，现在我想在页面重新加载后保留滚动条位置。是否有任何javascript方法可以做到这一点？我尝试了下面的代码，但没有成功。

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

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

我也浏览了许多网站，但是没有任何可行的解决方法。 请帮我解决这个问题。

谢谢。

- Shruthi Sathyanarayana

---

我认为一般来说这个设计不好。最好使用AngularJS或jQuery ajax，并在后台进行提交。也许有一种方法可以将其存储在Cookies中，但这仍然不是一个好的解决方案。 - Ehsan88

你可以给复选框的容器添加一个 id，在重新加载页面时，在 URL 后面添加 #container_id。 - Akshay

@Akshay，我已经为我的复选框设置了ID。但是如何将它附加到URL上？ - Shruthi Sathyanarayana

Answer 1

你可以使用会话存储来保存位置，然后在页面重新加载时返回该位置，例如：

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

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

这里是 JSFiddle 演示

- Ahs N

---

@ Ahs N，感谢您的回复。但是上面的代码对我不起作用。它没有到达500像素的位置。我应该怎么办？ - Shruthi Sathyanarayana

@ShruthiSathyanarayana 加入这里的聊天室，让我们一起解决你的问题 :) - Ahs N

代码有效。谢谢 :) 但是，如果我使用那段代码，日历图标没有弹出。 - Shruthi Sathyanarayana

那是一个不同的问题，你应该将其作为一个新问题发布 :) - Ahs N

Answer 2

设置 scrollTop 可以实现此功能（在大多数浏览器中，您需要将其设置在 documentElement 上，但在其他浏览器中，您需要将其设置在 body 上；最简单的方法是在两者上都设置）。此外，该值为数字（没有 px）。

但您必须在正确的时间进行操作，即在页面重新加载后，可能需要使用 setTimeout 甚至在 onload 回调函数中（您需要进行实验以确定哪种方法适用于您的页面）。以下是使用 setTimeout 的示例：

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

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

- T.J. Crowder

---

现在不需要从onClick调用这个函数了吗？ - Shruthi Sathyanarayana

@ShruthiSathyanarayana：不，如果此时您将刷新页面，则在用户单击复选框时设置滚动不会有所帮助。 - T.J. Crowder

谢谢您的回复。我刚刚尝试了上面的代码。但是它在我的页面打开时就重新加载了，而不是当我点击复选框时才重新加载。 - Shruthi Sathyanarayana

@ShruthiSathyanarayana：是的，你需要在某个地方保存一个值（可能是sessionStorage），或者在查询字符串上放置一个标志，以便知道是否要执行它。请参见Ahs N的答案。 - T.J. Crowder

Answer 3

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

但是，如果您仍然想实现此功能，由于页面重新加载时整个DOM都会重新加载，因此您上面的代码将不起作用。可以使用cookie或localstorage来设置标志或值（整数）以进行滚动。在页面加载时检查是否将任何值设置为特定的cookie或localStorage变量，然后滚动到给定值。请注意，在UI方面，这是非常糟糕的做法。我强烈建议您使用ajax或使用表单一起提交值。

- Ankit