UI Tip

LANGUAGE: VB .NET

ASP.NET VERSIONS: 1.0 | 1.1

Hold Your (Scroll) Position

Don't let a postback reset your page's scroll position.

By Brad McCabe

One of the challenges of ASP.NET is retaining scroll position across postbacks. There are, of course, times when your application must perform a postback, and unless you are using smart navigation (which has its own limitations) you'll find that longer pages reset to the top when they reload. Although this is not an ASP.NET-specific issue, it is very noticeable in ASP.NET because of the postback architecture in use.

One of the ways to tackle this challenge is to use the onScroll event of the client browser and record the scroll location into a hidden field. You can then use this value to reset the scroll position when you return to the browser. You can create a server-side function to write one or two client-side scripts to handle this.

First, create a couple of string builder objects to create the various JavaScript functions you'll need:

Dim SaveScrollLocation As New StringBuilder

Dim SetScrollLocation As New StringBuilder

After you've created the string builders, you need to add a hidden field to your page to store the scroll position. Use the RegisterHiddenField function to add this field through code, allowing you to call this function from any page without having to have any objects or fields on the main ASPX page:

RegisterHiddenField("__SCROLLLOC", "0")

After you've added the hidden field, you can proceed to create a couple of lines of JavaScript that will capture the onScroll event and store the location in your hidden field. Once the JavaScript is written, use the RegisterStartUpScript function to place the code on the HTML sent to the client. This causes the code to be fired when the page is loaded and begin logging your scroll location:

SaveScrollLocation .Append("<script language='javascript'>")

SaveScrollLocation .Append("function SaveScrollLocation () {")

SaveScrollLocation .Append("     document.forms[0].__SCROLLLOC.value = thebody.scrollTop;")

SaveScrollLocation .Append("}")

       SaveScrollLocation .Append("thebody.onscroll=SaveScrollLocation ;")

SaveScrollLocation .Append("</script>")

RegisterStartupScript("saveScroll", saveScrollPosition.ToString())

Now you must add some code to restore the scroll position on any postbacks. Start by checking the IsPostBack property of the page. If this is a postback, the app creates some JavaScript to fetch the scroll location from the hidden field and restore the page to that location. Once again, you'll register this script to run at page load for the client:

If IsPostBack Then

  SetScrollLocation .Append("<script language='javascript'>")

  SetScrollLocation .Append("function SetScrollLocation () {")

  SetScrollLocation .Append("     thebody.scrollTop = " & Request("__SCROLLLOC") & ";")

  SetScrollLocation .Append("}")

  SetScrollLocation .Append("thebody.onload=SetScrollLocation ;")

  SetScrollLocation .Append("</script>")

  RegisterStartupScript("setScroll", SetScrollLocation .ToString())

End If

With just a few lines of code you have created a reusable procedure that you can call from the page load event of any ASP.NET page to record the scroll location of the user and restore the page to that location after a postback to the server. This is another good utility to add to your custom page base class.

Got a UI question, tip, or idea for a topic you'd like me to cover? I'd love to hear it. E-mail me at mailto:uitips@aspnetPRO.com.

Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at mailto:uitips@aspnetPRO.com.