Click here to Skip to main content
15,354,423 members
Articles / Web Development / ASP.NET
Posted 30 Nov 2007


9 bookmarked

Maintain Scroll Position in Panel, Div

Rate me:
Please Sign up or sign in to vote.
3.73/5 (6 votes)
30 Nov 2007CPOL2 min read
Maintain Scroll position of panel or div using the code


Hi, friends. After reading this article, you will be able to maintain the scroll position in panel or div of any Web page. There are lots of techniques to do this, but I was facing a problem so I used the below code and solved the problem. If you want to maintain the scroll position of a Web page, then it is easy to do so through the ASPX page property.

MaintainScrollPosition = "true"

But here the problem is with div or panel in Web page.


I wanted to maintain the scroll position of div or panel in a Web page. I got a solution for the same but after implementing it, I was faced with another problem. If I put an alert before setting the position, I was getting the desired output. But when I removed the alert, it was not working. That was strange! So I implemented the below code to achieve the same.

This article will describe every single line of code.

Using the Code

This is the code in JavaScript from which we can do the same thing. But the problem arises at one point.

First of all, put one div and give Id = "myDIV". Assign height = 200px.

Now take on gridview and put into div. Bind data to gridview and make sure you have date in gridview so div can scroll.

Now copy and paste this code in the ASPX page in the script tag:

// Code
window.onload = function()
    //Get value from cookie
    var strCook = document.cookie;
        var intS = strCook.indexOf("!~");  
        var intE = strCook.indexOf("~!"); 
        // find y position of Div
        var strPos = strCook.substring(intS+2,intE); 
        // Set y position of Div
        document.getElementById("myDIV").scrollTop = strPos;   

// call  this function onscroll of div. You will get red line(i.e. error)
// but don't bother about that.
function SetDivPosition()
    // To get y position of Div
    var intY = document.getElementById("myDIV").scrollTop; 
    // Set cookie value
    document.cookie = "yPos=!~" + intY + "~!"; 

Now after scrolling div when clicking on the last row of gridview, it's again going in the first row. Here I have put an alert just above one line. See the code below:

alert("Any Alert.... Hello Friend");
document.getElementById("myDIV").scrollTop = strPos;

Now, when I run it again after clicking ok on the alert, it works perfectly....!!
So now I tried to solve this bug. I searched a lot, but had no luck. Here is one solution for that which I came up with.

Add one HTML hidden field and set Id = myHidden.

// Code
// Call onclick event of Div
function SetDivPosition()
    // Using this line e get it !!
    window.setTimeout("SetNow('" + 
        document.getElementById("myHidden").innerHtml + "')",200);

var strPos;

function SetNow(strPos)
    document.getElementById("myDiv").scrollTop = strPos;

// Call onscroll event of Div
function GetDivPosition()
    document.getElementById("myHidden").innerHtml = 

Here is the output that we would like to see. Really short and sweet code.

Points of Interest

You need to try until you get your desire output. There are lots of ways to achieve it.


  • 1st December, 2007: Initial post


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


About the Author

Sun Rays
Team Leader
India India
Working as a Team Lead in MNC located at India.
In IT world, I have worked with Microsoft Technologies and always ready for R&D.
Worked with Website Development and Windows based applications as well.

New errors are really good and being happy to resolve those.....

Comments and Discussions

GeneralThanks Pin
scimmionsons30-Nov-12 3:20
Memberscimmionsons30-Nov-12 3:20 
GeneralThanks to post this article Pin
Bhagwat Prasad Sharma17-Jul-12 1:30
MemberBhagwat Prasad Sharma17-Jul-12 1:30 
GeneralThank you, you helped. Here is what I got working from your example: Pin
Aaron_B17-Jun-12 22:11
MemberAaron_B17-Jun-12 22:11 
GeneralRe: Thank you, you helped. Here is what I got working from your example: Pin
Sun Rays17-Jun-12 22:48
MemberSun Rays17-Jun-12 22:48 
GeneralRe: Thank you, you helped. Here is what I got working from your example: Pin
Aaron_B18-Jun-12 13:14
MemberAaron_B18-Jun-12 13:14 
GeneralThank you so much! Pin
GornHorse24-Mar-09 19:27
MemberGornHorse24-Mar-09 19:27 
GeneralMaintain Scroll Position in Panel, Div Pin
123456pra4-Dec-08 0:52
Member123456pra4-Dec-08 0:52 
GeneralRe: Maintain Scroll Position in Panel, Div Pin
Sun Rays4-Dec-08 1:09
MemberSun Rays4-Dec-08 1:09 
GeneralRe: Maintain Scroll Position in Panel, Div Pin
Aaron_B18-Jun-12 13:19
MemberAaron_B18-Jun-12 13:19 

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.