Get Into This

In part 2a of our tutorial we went over the Dashboard, how it was created and what it was used for. You do not need to read and/or understand part 2a to read part 2b. They are totally unrelated, save for the fact that I am using them both on the same project.

In this tutorial I will be discussing the technique used to save the current scroll position of the page when submitting a form and returning to the same page. In some cases, it is desirable that you maintain the scroll position when returning to the same page after a form submittal. This tutorial is a lot shorter and probably easier to implement and understand.

The basic concept is this:

• using javascript, we get the current X and Y scroll positions of the page.
• set those values to hidden fields within our form.
• submit the form, which now contains the X and Y scroll values.
• perform server-side logic.
• this is the most important part: when redirecting back to our original page, we need to pass back the X and Y values as querystring variables. Otherwise, we have no idea where to scroll to.
• at the bottom of the page or using onload, we get the X and Y values and using some more javascript, we scroll to the original position we were at before the page was submitted.

That's it really. Usually this happens very fast, especially if most of the content on the page has already been downloaded and cached by the browser. You barely ever notice the sudden jerk or jump as the page jumps to the previous scroll position. In my tests, it almost appeared as if I never left the page at all.

Example Link

Here is the javascript funtion I use to save the scroll position of the page right before I submit the page. This function can either be called onsubmit or within a custom function which actually submits a form for you.

function saveScrollPositions(theForm) {
	if(theForm) {
		var scrolly = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop;
		var scrollx = typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement.scrollLeft;

		theForm.scrollx.value = scrollx;
		theForm.scrolly.value = scrolly;
	}
}

Note that I have not tested this on many browsers, but it works fine in IE 6.x and FF. I'm assuming it'll work in IE 5.5 and most other mozilla browsers.

Now on the server-side we do all the necessary logic and when it is time to redirect back to the original page, we simply pass back the scrollx and scrolly values as part of the query string. Since I was using ASP for the Leaflink project, this is how it looked:

scrollx = Request.QueryString("scrollx")
scrolly = Request.QueryString("scrolly")
' redirect back to original page (index.asp in this case)
' with scrollx and scrolly passed back as query string variables
Response.Redirect "/leaflink/?scrollx=" & scrollx & "&scrolly=" & scrolly

Once we're back on the originating page, we simply grab the scrollx and scrolly values from the query string and scroll to their position(s).

// use this to scroll to the previous scroll position
// when form was submitted.
window.scrollTo(< %= Request.QueryString("scrollx") %>, < %= Request.QueryString("scrolly") %>);

PHP version of the above code, at the bottom of our page:

$scrollx = 0;
$scrolly = 0;

if(!empty($_REQUEST['scrollx'])) {
    $scrollx = $_REQUEST['scrollx'];
}

if(!empty($_REQUEST['scrolly'])) {
    $scrolly = $_REQUEST['scrolly'];
}

// use this to scroll to the previous scroll position
// when form was submitted.
window.scrollTo(< ?= $scrollx ?>, < ?= $scrolly ?>);

I put that last bit of code at the bottom of my page, but it could've been put inside an onload event handler as well. Either one would work just fine.

That's it for this tutorial. Hope you find it useful. If you have any questions and/or comments, feel free to contact me.

Related posts:

1. Leaflink Explaind – Part 1 (summary)
2. Leaflink Explaind – Part 2a (the Dashboard)
3. Dojo Toolkit – Ajax with Backbutton