Reload page in same position

Question

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?

score 5 · Answer 1 · answered Nov 25 '10 at 21:09

5

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

answered Nov 25 '10 at 21:09

Ashley

5,939
9
39
82

Using the html anchor is good for scrolling to the same position on a page each time,so it will probably be good for my bulletin board, but it won't take you to the position that the page was previously at. It would be interesting to see if someone can come up with a more elegant solution than the one I proposed. – andrew Nov 25 '10 at 21:25
Just to clarify for other people reading this post.You redirect with a link like the one shown in this answer and the on the page you can have an anchor tag that looks like this which causes the page to be reloaded at that anchors position – andrew Nov 25 '10 at 21:29
2

It doesn't need to b it can be any element with an id, example:
So if you set your link to go to the element that contains your bulletin board, you've got your auto scroll – Ashley Nov 25 '10 at 22:18

Paulino III · Answer 2 · 2012-05-18T14:17:51.163

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

score 1 · Answer 3 · answered Nov 25 '10 at 21:42

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.

good point ajax might be the solution in this situation and you are right, it would make the experience a lot more user friendly. — andrew, Nov 25 '10 at 22:22

score 0 · Answer 4 · answered Aug 06 '22 at 06:09

0

  window.location.href=window.location.href;

reloads the same page (to the top).

  location.reload();

reloads the same page (to the same position).

answered Aug 06 '22 at 06:09

Natarajan N Napoleon

369
1
4
9

Reload page in same position

4 Answers4

Linked