Reload page in same position
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 bull开发者_开发问答etin 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.
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
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?
You can use an html anchor to scroll to part of a page:
index.php?page_num=2#YOURID
Or set it using your js. location.hash
I took the code from http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser and use it to set the scroll to the last position on page reload.
<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! :)
The function to retrieve scroll positions was taken from: http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser
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.
window.location.href=window.location.href;
reloads the same page (to the top).
location.reload();
reloads the same page (to the same position).
加载中,请稍侯......
精彩评论