Hold Your (Scroll) Position

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 scrollposition across postbacks. There are, of course, times when your applicationmust perform a postback, and unless you are using smart navigation (which hasits own limitations) you'll find that longer pages reset to the top when theyreload. Although this is not an ASP.NET-specific issue, it is very noticeablein ASP.NET because of the postback architecture in use.

One of the ways to tackle this challenge is to use theonScroll event of the client browser and record the scroll location into ahidden field. You can then use this value to reset the scroll position when youreturn to the browser. You can create a server-side function to write one ortwo client-side scripts to handle this.

First, create a couple of string builder objects to createthe 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 adda hidden field to your page to store the scroll position. Use theRegisterHiddenField function to add this field through code, allowing you tocall this function from any page without having to have any objects or fieldson the main ASPX page:

RegisterHiddenField("__SCROLLLOC", "0")

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

SaveScrollLocation .Append("")

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

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

SaveScrollLocation .Append("}")

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

SaveScrollLocation .Append("")

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

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

If IsPostBack Then

  SetScrollLocation.Append("   SetScrollLocation.Append("function SetScrollLocation () {")   SetScrollLocation.Append("     thebody.scrollTop =" & Request("__SCROLLLOC") & ";")   SetScrollLocation.Append("}")     SetScrollLocation.Append("thebody.onload=SetScrollLocation ;")   SetScrollLocation.Append("")

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

End If

With just a few lines of code you have created a reusableprocedure that you can call from the page load event of any ASP.NET page torecord the scroll location of the user and restore the page to that locationafter a postback to the server. This is another good utility to add to yourcustom page base class.

Got a UI question, tip, or idea for a topic you'd like meto cover? I'd love to hear it. E-mail me at [email protected].

Brad McCabe is thetechnical evangelist for Infragistics. Brad also has been a systems architectand consultant for Verizon Communications and many other clients, and he was aleading .NET evangelist within Ajilon Consulting. His primary interests includeASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networkingtechnologies. E-mail him at [email protected].