Maintain vertical scroll position

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.

Related posts

Bookmark and Share

Leave a Reply