Keeping Scroll Position over post Backs: ASP Alliance


Keeping Scroll Position over post Backs

page

by Justin Lovell
Feedback

Average Rating:

Views (Total / Last 10 Days): 43903/ 47

Introduction

(Update: The StaticScrollBackPosition control has got a few extra "features" added to it. The entire article has been revised to reflect on the changes. )

(Note: You may download the control at the very last page of this article)

When your page does a post-back to the web server, we sometimes need to persist the scroll position where the user was before the post back began. If this sounds like your need for your application, I have developed the server control to solve your problem.

There is a built-in feature (in the .NET Framework) for keeping the scroll position of the user (and also other useful features), called smart navigation. However, this built-in feature posses two problems that my server control (I named it StaticScrollBackPosition) overcomes:

Smart navigation can only be used by Internet Explorer 5+. StaticScrollBackPosition caters for majority of browsers:
- Internet Explorer 4 +
- Netscape 4 +
- Opera 7 + (possibly lower versions as well)
- Mozilla 1 + (possibly lower versions as well)
Under smart navigation, the formatting of the pages from post back can go tremendously wrong; if the styling of the page is a mixed breed of CSS and HTML tags.

To use the server control, it is as simple as dropping it in a web form (must be under the server side <form>). However, I am going to explain the few tricks that I used in creating the server control.

The basic idea behind the StaticScrollBackPosition control is that it will not output any user interface – it will only use JavaScript to do all the work for us. The major tricks are:

As the user "views" the page, the scrolled position is constantly recorded to the hidden fields that StaticScrollBackPosition provided.
Back to the server processing, StaticScrollBackPosition will then capture the positions that was placed in the hidden fields and then send a JavaScript block telling the browser where to scroll to once the page has loaded.
And so the cycle will continue from step one after each post-back.

It is that simple. And to make things sound even more simpler, is the fact that the JavaScript has an extremely small size.

The JavaScript

Essentially, the script listed below is the one that will save the scroll position constantly to hidden fields. The rate that the scroll position is saved is 100 times per second to ensure maximum resolution of where the user is. The script is listed below:

function SaveScrollPositions() {
   document.forms[0].StaticPostBackScrollVerticalPosition.value =
      (navigator.appName == 'Netscape') ? document.pageYOffset : document.body.scrollTop;
   document.forms[0].StaticPostBackScrollHorizontalPosition.value =
      (navigator.appName == 'Netscape') ? document.pageXOffset : document.body.scrollLeft;
   setTimeout('SaveScrollPositions()', 10);
}

SaveScrollPositions();

And, when the page has been posted back to, it then renders the following JavaScript:

function RestoreScrollPosition() {
   scrollTo(0, 400); // determined during run-time
}

window.onload = RestoreScrollPosition;

What is noteworthy on the above JavaScript is that the RestoreScrollPosition method is only called once the page has loaded. The JavaScript waits for the page to load completely so we could overcome a bug in Internet Explorer when the script attempts to scroll the page (via the scrollTo client method). If another JavaScript relies on this type of listening, either StaticScrollBackPosition control will not work or the other JavaScript block(s) will not work correctly – so be warned that this will be the only known bug.

However, I did try to soften the blow and told it to attach to the window's load event and not the document's load event. Therefore, if you have some HTML, as shown below, this short-fall (bug) will not effect you at all:

<body onLoad="...">
   <!-- some code -->
</body>

An Ending Note

My server control's source and binary (in release mode) can be downloaded from here. Drop the compiled assembly into your bin folder and you are set to go. All that you have to do to use StaticScrollBackPosition on your pages, as demonstrated below:

<%@ Register TagPrefix="jlc" Namespace="JLovell.WebControls"
   Assembly="StaticPostBackPosition" %>

<jlc:StaticPostBackPosition runat="server"/>

I hope that this server control will help many of you that cannot use smart navigation for whatever reason (be it for rendering or other technical issues that may occur). And the main reason why I wrote this server control is that it can give a better web browsing experience for all browsers and all users.

Enjoy!

Product Spotlight