In the below HTML markup I have an HTML DIV with vertical scrollbar for which we will maintain the scroll position on PostBack, an HTML HiddenField and an ASP.Net Button to perform PostBack.
When the Button is clicked and the form is submitted i.e. on PostBack, the value of the HiddenField is posted to the server which can be retrieved using the Request Form collection by supplying the name of the HiddenField.
Inside the window onload event of the page, the value of the HiddenField is retrieved from the Request Form collection, the extracted value is the scroll position of the HTML DIV saved earlier and is now used to set the scroll position of the HTML DIV.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Maintain Scroll on Div after postback</title>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById("divItem");
var div_position = document.getElementById("div_position");
var position = parseInt('<%=Request.Form["div_position"] %>');
if (isNaN(position)) {
position = 0;
}
div.scrollTop = position;
div.onscroll = function () {
div_position.value = div.scrollTop;
};
};
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Maintain Scroll on Div after postback</h1>
<div id="divItem" style="overflow-y: scroll; height: 260px; width: 400px">
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
11. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
14. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
19. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
20. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
23. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
24. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
25. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
</div>
<hr />
<input type="hidden" id="div_position" name="div_position" />
<asp:Button Text="Submit" runat="server" />
</form>
</body>
</html