Reload page in same position

javascript php dom

16,188

Solution 1

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

Solution 2

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

Solution 3

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.

16,188

Author by

andrew

I have been travelling since January 2010 working along the way. Interested in lots of things web design being one of them.

Updated on June 04, 2022

Comments

andrew almost 2 years
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.

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?