javascript 在相同位置重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4280859/
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
Reload page in same position
提问by andrew
Hi I wanted to know if there was an easy way to scroll a page to its previous position when it reloads. For example I have a bulletin board half way down my page. The bulletins are paginated and the user can click next to see the next lot of bulletins. The problem when the page reloads it does its normal behaviour of jumping to the top of the page. A good example of the page reloading to the same position is when you reload the page using F5.
嗨，我想知道是否有一种简单的方法可以在重新加载页面时将页面滚动到先前的位置。例如，我在页面下方有一个公告板。公告是分页的，用户可以单击下一步查看下一批公告。页面重新加载时的问题会执行其跳转到页面顶部的正常行为。页面重新加载到相同位置的一个很好的例子是当您使用 F5 重新加载页面时。
I know the hard way to do it.
我知道这样做的艰难方法。
the pagination link would be like this
分页链接是这样的
index.php?page_num=2&page_scroll=200;
When the page loads run a script which pulls out the page scroll from the url and sets
当页面加载时运行一个脚本，该脚本从 url 中拉出页面滚动并设置
document.body.ScrollTop==200px.
Surely It is possible to access the dom of the last page and get it's position before it redirected. How does the browser do it when you hit F5?
当然可以访问最后一页的 dom 并在重定向之前获取它的位置。按F5浏览器是怎么做的？
回答by Ashley
You can use an html anchor to scroll to part of a page:
您可以使用 html 锚点滚动到页面的一部分：
index.php?page_num=2#YOURID
Or set it using your js. location.hash
或者使用你的 js 设置它。 location.hash
回答by Paulino III
I took the code from http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowserand use it to set the scroll to the last position on page reload.
我从http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser获取代码， 并使用它在页面重新加载时将滚动设置为最后一个位置。
<script type="text/javascript">
<!--
/////////////////////////////////////////////////////////
//get scroll position
var get_scroll = function(){
var x = 0, y = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
y = window.pageYOffset;
x = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
y = document.body.scrollTop;
x = document.body.scrollLeft;
} else if( document.documentElement &&
( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
}
var obj = new Object();
obj.x = x;
obj.y = y;
return obj;
};
//////////////////////////////////
function saveScroll(){
var scroll = get_scroll();
document.getElementById("x").value = scroll.x;
document.getElementById("y").value = scroll.y;
}
//////////////////////////////////////////////
////////This runs at <body onload = "setScroll()" >///////////////////////////
function setScroll(){
var x = "<?php echo $_POST['x']; ?>";
var y = "<?php echo $_POST['y']; ?>";
if(typeof x != 'undefined')
window.scrollTo(x, y);
}
////////////////////////////////////////////////////////////////
-->
</script>
<body onload = "setScroll()">
<!--Post variables to save x & y -->
<input name="x" id="x" type="hidden" value="" />
<input name="y" id="y" type="hidden" value="" />
</body>
Then use an event such as onclick="saveScroll()" or to save the scroll values. After submit watch the magic happen! :)
然后使用诸如 onclick="saveScroll()" 之类的事件或保存滚动值。提交后观看魔术发生！:)
The function to retrieve scroll positions was taken from: http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser
检索滚动位置的功能取自：http: //webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser
回答by RPeden
The hard way you mentioned might be the only way to do it, since from the browser's perspective, it is loading an entirely new page.
您提到的艰难方法可能是唯一的方法，因为从浏览器的角度来看，它正在加载一个全新的页面。
Another way around it, though, would be to load the next next page of bulletins via an XHR and just replace the current contents of the div that the bulletins are in. That would make paging back and forth a seamless experience for your users, as they wouldn't have to wait for a whole page to load and render. This may or may not be a good choice depending on the circumstances, but it's worth considering.
不过，另一种解决方法是通过 XHR 加载下一页公告，并只替换公告所在 div 的当前内容。这将使用户的来回分页体验无缝，如他们不必等待整个页面加载和呈现。根据具体情况，这可能是也可能不是一个好的选择，但值得考虑。
