Monday, September 14, 2009

Maintain Scroll Position On Page Refresh Using ASP.NET or jQuery

There is a feature of ASP.NET that isn't widely known called MaintainScrollPositionOnPostback, which is a common way of maintaining the scroll position after a Postback. Behind the scenes ASP.NET passes a hidden variable with the page location and resets it with JavaScript after the page re-renders.

<%@ Page 
   Title="Page Title Here" 
   MaintainScrollPositionOnPostback="true" 
   Language="C#" 
   MasterPageFile="~/YourMasterPage.master" 
   AutoEventWireup="true" 
   CodeBehind="YourCodeBehind.aspx.cs" 
   Inherits="YourCodeBehind" %>

However, this method will not work if the Postback does a Redirect on the server.

If the Postback does a Redirect instead of re-rendering the same page, then you could use the ScrollSaver jQuery script. All you have to do is include the script on the page and before a Postback occurs it will save the location of each element in a cookie and then restore it when the page re-renders. This will work for both a Postback and a Redirect.

All you have to do is include the jQuery plugin into your page. You don’t have to actually call any jQuery methods… it just does everything for you!

<script type="text/javascript" src="scrollsaver.min.js"></script>

I would recommend only adding this script to the page you are interested in maintaining position in order to minimize any risk of affecting other pages in your project. The overhead of the minimized plugin is only 1.63K and when you consider it will get cached on the client that is pretty good :)

No comments:

Post a Comment