This post describes how to maintain vertical scroll position after form submission or clicking on the link. Script will read vertical scroll position and append scroll value to the URL. After page is loaded, JavaScript function will search for the scroll parameter in the URL and set the scroll position.
Demo first. Please try to scroll few lines down and click on the my_href() link. Reloaded page should stay at the same vertical position. Voilà! And the source:
// onLoad event
window.onload = function(){
set_scroll();
}
// if query string in URL contains scroll=nnn, then scroll position will be restored
function set_scroll(){
// get query string parameter with "?"
var search = window.location.search;
// if query string exists
if (search){
// find scroll parameter in query string
var matches = /scroll=(\d+)/.exec(search);
// jump to the scroll position if scroll parameter exists
if (matches) window.scrollTo(0, matches[1]);
}
}
// append scroll value to the URL
function my_href(href){
var scroll;
// Netscape compliant
if (typeof(window.pageYOffset) == 'number')
scroll = window.pageYOffset;
// DOM compliant
else if (document.body && document.body.scrollTop)
scroll = document.body.scrollTop;
// IE6 standards compliant mode
else if (document.documentElement && document.documentElement.scrollTop)
scroll = document.documentElement.scrollTop;
// needed for IE6 (when vertical scroll bar is on the top)
else scroll = 0;
// set href location with scroll position parameter
window.location.href = href + '&scroll=' + scroll;
}
The link my_href() shows how to call this page with some parameters and maintain scroll position. After clicking on the link, you will see example parameters followed by scroll position parameter. Please try to change scroll value directly in the address line and press enter. Page should take vertical position according to the changed value.
You can save this functions to the scroll.js file and include it to the pages where maintaining vertical scroll position is important.
Can this be applied to the auto-refresh function of a web page, I am looking for something very similar to this, but it has to work with the auto refresh.
Cheers
set_scroll() function doesn't have to be modified. onload event will first set scroll position and set timer to call my_refresh() function (after 2 seconds in this example). my_refresh() is modified my_href() ...
Hope this will help.
Bye!
// onLoad event window.onload = function() { set_scroll(); setTimeout(my_refresh, 2000); } // set href location with scroll position function my_refresh(){ var scroll, href, q; // Netscape compliant if (typeof(window.pageYOffset) == 'number') { scroll = window.pageYOffset; } // DOM compliant else if (document.body && document.body.scrollTop) { scroll = document.body.scrollTop; } // IE6 standards compliant mode else if (document.documentElement && document.documentElement.scrollTop) { scroll = document.documentElement.scrollTop; } // needed for IE6 (when vertical scroll bar is on the top) else { scroll = 0; } // define href href = window.location.href; // cut out scroll parameter with ? or & before href = href.replace(/.scroll=\d+/g, '') // test if href parameter contains ? character if (href.indexOf('?') === -1) q = '?'; else q = '&'; // refresh page with scroll position parameter window.location.href = href + q + 'scroll=' + scroll; }I cannot get it to work!!! What do I need to do exactly after including all this code, I guess I have to change something in my code but you don't mention anything about that. What do I have to pass as arguments to the function myHref??!!
@maher - my_href() function expects parameters in form "?param1=a¶m2=b¶m3=c" to send to the page. scroll parameter will be added at the end and read in set_scroll() function. You also wrote myHref instead of my_href so the problem might be in calling non existing function.
On click of the game the page reload moves to the top. Can you suggest a way to maintain the vertical position of the game?
http://www.exploreglencarbon.com/games/tictactoe.html
Any assistance is greatly appreciated.
I found the answer to my question on the following page
http://scripterlative.com/files/recoverscroll.htm
Works very well.
Thanks.
Very very useful.. Thank you so much
this was helpful! thanks!
Sorry for the elementary question, I'm pretty new to javascript. Could you explain what calls the function my_refresh()? I see the function defined in the code, but there is no event that calls it.
@Ben - my_refresh() was modification of original my_href() function to maintain vertical scroll position in auto-refresh mode. Inside window.onload you can see setTimeout() method which will call my_refresh() after 2 seconds. The setTimeout() method calls a function after a specified number of milliseconds.
dbunic
I have tried this with IE8 and can not get it to work. Have you looked at any update for this?
Thanks.
@Don - This script should work in IE8. I just open this page in IE8 and click on my_href() link. After page is loaded, scrollbar has been set to the exact location of previous scrollbar position. Do you have problem with this page or your own example?
Hey dbunic
I am trying to add your function to a form that redirects to a page and then back to the original.
When I add your function to the action value of the form, the form does not seam to post any of the fields within it. Do you know what I am doing wrong? (form code below)