Click here to Skip to main content
15,867,833 members
Articles / Web Development / ASP.NET
Article

Persisting the scroll position of a DIV on AJAX postbacks

Rate me:
Please Sign up or sign in to vote.
4.43/5 (15 votes)
18 Mar 2008CPOL1 min read 100.7K   28   19
This article explains how you can persist the scroll position of a DIV in AJAX postbacks.

Introduction

By default, the scroll position of DIV tags will be reset whenever you do a postback with AJAX. The following code can be used if you're working with AJAX and DIV-tags and you need to persist the scroll position of your DIV tag whenever an AJAX-postback occurs. I used the code in my own project, where I had to have an UpdatePanel and a GridView inside a fixed DIV-tag, while persisting the scroll position on Edit/Cancel/Update commands.

The code has been tested with IE6, IE7, FF 2.0.0.12, and Opera 9.26, and should basically work with any browser supporting the document.getElementById() method.

Background

I recently came across the prescribed problem above. So, I Googled and found an article on CodeProject (Persisting the scroll position of child DIV’s using MS AJAX) - however, the provided solution didn't work for me, so I decided to implement my own solution.

Using the code

Add the following code between your <head></head> or your <body></body> tags:

JavaScript
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
    setScrollPos();
} 
function saveScrollPos(){
    document.getElementById("scrollPos").value = 
             document.getElementById("divScroll").scrollTop;
}
function setScrollPos(){
    document.getElementById("divScroll").scrollTop = 
             document.getElementById("scrollPos").value;
}
</script>

NB! You might have to change the scrollPos name with the ClientID if your element is encapsulated in another control, MasterPage, UpdatePanel etc. You can get the ClientID like this:

C#
public static string scrollPos = String.Empty;

protected void Page_Load(object sender, EventArgs e){
  scrollPos = ((HtmlInputHidden)scrollPos).ClientID.ToString();
}

Then, change the JavaScript to:

JavaScript
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
    setScrollPos();
} 
function saveScrollPos(){
    document.getElementById("<%=scrollPos%>").value = 
                document.getElementById("divScroll").scrollTop;
}
function setScrollPos(){
    document.getElementById("divScroll").scrollTop = 
                document.getElementById("<%=scrollPos%>").value;
}
</script> 

Assuming that you have already added a <asp:ScriptManager> to your page, add the following:

HTML
<input type="hidden" id="scrollPos" name="scrollPos" value="0" runat="server"/>

<asp:UpdatePanel runat="server" ID="up1" UpdateMode="always">
<ContentTemplate>
<asp:Button runat="server" ID="button1" text="Post back!" />

<div id="divScroll" onscroll="saveScrollPos();" 
        style="height: 200px; overflow:auto; overflow-x:hidden; overflow-y:scroll;" >

</div>

</ContentTemplate> 
</asp:UpdatePanel>

Points of interest

The trick that made the code work compared to other resources I have looked at was the endRequest - see more here: PageRequestManagerEndRequestEvent.

Updates

  • 19-3-2008 - Fixed a couple of typos :-)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Denmark Denmark
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionThanks a lot , Thank you very much Pin
APul Raj24-Mar-16 0:37
APul Raj24-Mar-16 0:37 
QuestionExcellent Pin
wadigzon Diaz-wong26-Aug-15 9:21
wadigzon Diaz-wong26-Aug-15 9:21 
GeneralSweet! Pin
Member 29253158-Feb-12 2:01
Member 29253158-Feb-12 2:01 
GeneralRe: Sweet! Pin
perels3-Jun-12 8:17
perels3-Jun-12 8:17 
GeneralThanks!! Pin
yonatankr16-Aug-09 20:21
yonatankr16-Aug-09 20:21 
GeneralRe: Thanks!! Pin
perels3-Jun-12 8:17
perels3-Jun-12 8:17 
QuestionHow to reset the scroll positon back to zero? Pin
bentonbenton12-May-09 12:19
bentonbenton12-May-09 12:19 
AnswerRe: How to reset the scroll positon back to zero? Pin
bentonbenton12-May-09 12:34
bentonbenton12-May-09 12:34 
GeneralRe: How to reset the scroll positon back to zero? Pin
perels21-Jul-09 12:03
perels21-Jul-09 12:03 
GeneralExcellent - Thank you Pin
thelizard2-May-09 8:52
thelizard2-May-09 8:52 
GeneralRe: Excellent - Thank you Pin
perels21-Jul-09 11:58
perels21-Jul-09 11:58 
GeneralThis is fantastic Pin
Sergodtud18-Mar-09 9:19
Sergodtud18-Mar-09 9:19 
GeneralRe: This is fantastic Pin
perels21-Jul-09 11:55
perels21-Jul-09 11:55 
GeneralCouple tweaks Pin
btoum.roumada9-Jan-09 11:02
btoum.roumada9-Jan-09 11:02 
GeneralRe: Couple tweaks Pin
perels21-Jul-09 11:58
perels21-Jul-09 11:58 
GeneralThanks Pin
Saeedses30-Jun-08 0:01
Saeedses30-Jun-08 0:01 
GeneralRe: Thanks Pin
perels11-Jul-08 4:39
perels11-Jul-08 4:39 
Hi Saeedses,

You could try something like this (have not tested it though):
function setScrollPosBottom(){
  document.getElementById("divScroll").scrollTop = document.getElementById("divScroll").scrollHeight;
}

GeneralGreat Pin
merlin98119-Mar-08 5:36
professionalmerlin98119-Mar-08 5:36 
GeneralRe: Great Pin
perels19-Mar-08 7:03
perels19-Mar-08 7:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.