Eric Pascarello

Remembering the Page, Div, DataGrid, or any element's scroll position.

One thing that we all can not stand is that page refresh or post back and the scroll position of our page is magically brought back to the top of the page. You can have a datagrid and have the user push an edit button, it scrolls up. You have viewstate enabled, but it seems to crap out! Plus do not get me started on the amount of junk it adds to the page! So how do we fix this problem that keeps bothering our users? The answer is add a simple JavaScript file and attach an object to the elements. The code does the rest of the work for us. Let us see an example before we continue. Below us is two divs that are scrollable. The first one has the remember position code applied and the other div does not. Scroll both of them down. With both of the elements scrolled toa new position, refresh the page and see what happens.

Scroll Code Attached

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
ERIC
1
1
1
1
1
1
1
1
1
3.1415926535897932384626
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

Normal Div

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
ERIC
1
1
1
1
1
1
1
1
1
3.1415926535897932384626
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

Hopefully you will see that the one div with the scroll position code attached stays in the same position as you left it. The other div is sitting back on top as if the user never touched it. Of course your users will see a slight jump as it scrolls into position, but at least they are not having to scroll there. Now lets take a quick look at the code.

The Code:

The first thing we will look at is the external javascript code which remembers and sets the position of the scroll. This code takes care of adding the onscroll event handler to our element. It also detects when the element needs to be scrolled into place when the page is loaded. In this version it is storing the y and x scrolled coordinates for each element into a cookie. (Next version,probably next week (11/01/2005), will look at limiting writes and look at alternatives to cookies - I will update this article to point to it.)

String.prototype.rememberScrollPosition = function (){
  var objElement = document.getElementById(this);
  var intTop = (objElement.id + "-y").getCookie();
  if(intTop)objElement.scrollTop = intTop;
  var intLeft = (objElement.id + "-x").getCookie();
  if(intLeft)objElement.scrollLeft = intLeft;
  objElement.onscroll = function(){
    document.cookie = this.id + "-x=" + objElement.scrollLeft;
    document.cookie = this.id + "-y=" + objElement.scrollTop;
  }
}
String.prototype.getCookie = function(){
  if (document.cookie.length > 0){
    var intBegin = document.cookie.indexOf(this+"=");
    if(intBegin != -1){
      intBegin += this.length + 1;
      var intEnd = document.cookie.indexOf(";", intBegin);
      if(intEnd == -1) intEnd = document.cookie.length;
      return unescape(document.cookie.substring(intBegin, intEnd));
    }
  }
  return null;
}

To add this code to your page, you just need to reference the external javascript file. If you do not know how to do that, add the following link into your web page's header.

You may be looking at the code and say why are you prototyping a string to do this? Why not an Element.prototype. Well the short answer is IE does not support it yet, while Mozilla does. So we need to use a string to make it easy to add the scroll code to our element. I did it this way to save key strokes on your side of adding the JavaScript functionality to the element. Since we are using a string to add the scroll code to the element, we are just going to use the name of the element. Plus we need to do all of this on the onload event of the page.

window.onload = function(){ ("divTest").rememberScrollPosition(); ("bodyID").rememberScrollPosition(); }

The lines above go to the scroll position for a div and also the body. Just add an id attribute to the body tag (<body id="bodyID">) and it will be able tp remember the body's scroll position too. It is a rather simple concept to apply to your web page allowing users to maintain the state of the scrolling. This saves them time and also time for you so you do not have to listen to them complain about it. You can grab the files for this page here: http://www.pascarello.com/downloads/scrollposition.zip