即使在使用 javascript 重新加载后仍保留滚动条位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34261365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retain scrollbar position even after reloading using javascript
提问by Shruthi Sathyanarayana
I have requirement where if I click on a checkbox the value gets submitted and hence the page gets reloaded. Now, to click another checkbox, i need to scroll down again which is not a better idea. So, now I want to retain my scrollbar position even after page gets reloaded. Is there any method in javascript to do that? I have tried the below code, but there was no luck.
我有一个要求，如果我点击一个复选框，值就会被提交，因此页面会被重新加载。现在，要单击另一个复选框，我需要再次向下滚动，这不是一个更好的主意。所以，现在我想即使在页面重新加载后保留我的滚动条位置。javascript中是否有任何方法可以做到这一点？我试过下面的代码，但没有运气。
<input type="checkbox" onclick="myFunction()"/> One <br/>
function myFunction() {
document.body.scrollTop = 500px;
}
I also browsed many websites but nothing worked for me. Please help me with this issue.
我也浏览了许多网站，但没有任何效果对我有用。请帮我解决这个问题。
Thanks.
谢谢。
回答by Ahs N
You can use session storageto store the position then get back to the position when the page is reloaded, like this:
您可以使用会话存储来存储位置，然后在页面重新加载时返回该位置，如下所示：
$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
回答by T.J. Crowder
Setting scrollTopdoes do it (you set it on documentElementin most browsers, but on bodyon others; simplest thing is to just set it on both). Also, the value is a number (no px).
设置scrollTop确实做到了（您documentElement在大多数浏览器中设置它，但body在其他浏览器中设置它；最简单的方法是在两个浏览器上都设置它）。此外，该值是一个数字（没有px）。
But you have to do it at the right time, which is afterthe page has reloaded, possibly after a setTimeoutor even in an onloadcallback (you'll need to experiment to figure out which works on your page). Here's the setTimeoutexample:
但是您必须在正确的时间执行此操作，也就是在页面重新加载之后，可能setTimeout是在onload回调之后甚至是在回调中（您需要尝试找出哪些在您的页面上有效）。这是setTimeout示例：
setTimeout(function() {
document.documentElement.scrollTop =
document.body.scrollTop = 500;
}, 0);
However, I wouldn't do that. Instead, I'd submit the checkbox value via ajax and not reload the page. Even if you scroll down to where the user was after the reload, it's still a surprise for a page to reload when you check a box (I remember what Amazon used to do that) and it takes time. Ajax would let it happen in the background without interrupting the user.
但是，我不会那样做。相反，我会通过 ajax 提交复选框值，而不是重新加载页面。即使您在重新加载后向下滚动到用户所在的位置，当您选中一个框时，重新加载页面仍然是一个惊喜（我记得亚马逊曾经这样做过）并且需要时间。Ajax 会让它在后台发生，而不会打扰用户。
回答by Ankit
It wont be a good UI practice to create such behaviour, you should try using AJAX if you want to notify server as soon as the checkbox is toggled. Or simply use html form if you wish to send response of other elements as a bunch to the server.
创建这样的行为并不是一个好的 UI 实践，如果你想在复选框被切换时立即通知服务器，你应该尝试使用 AJAX。或者，如果您希望将其他元素的响应作为一堆发送到服务器，则只需使用 html 表单。
Just in case, if you still want to achieve the functionality, your above code will not work since as soon as the page reloads, the entire dom is reloaded. This could still be achieved using cookies or localstorage in which you can set a flag or a value (in integer) to scroll. On page load check if any value is set to that particular cookie or localStorage variable and then scroll to the given value. Please note this is a very bad practice in terms of UI. I highly recommend you to use ajax or submit the values together using a form.
以防万一，如果您仍然想要实现该功能，那么您的上述代码将无法工作，因为一旦页面重新加载，整个 dom 就会重新加载。这仍然可以使用 cookie 或 localstorage 来实现，您可以在其中设置标志或值（整数）来滚动。在页面加载时检查是否为该特定 cookie 或 localStorage 变量设置了任何值，然后滚动到给定值。请注意，就用户界面而言，这是一种非常糟糕的做法。我强烈建议您使用 ajax 或使用表单一起提交值。
