Introduction: In this article I
am going to explain how to maintain/retain scroll position of HTML Div on occurrence
of partial postback inside AJAX UpdatePanel using jQuery.
In previous articles i explained How to create jquery scrollable gridview with fix header in asp.net c#,vb and Jquery to show/hide controls placed in div based on radiobuttonlist selected value and Jquery to enable disable all controls placed inside div based on checkbox check uncheck and Print page content placed inside div tag with print preview using javascript in asp.net and Jquery to reset or clear all asp.net or html controls placed on web form
Description: Suppose we have to display large content on a
page but we have a limited space on page. In this case we can wrap the content
in HTML div and by setting its overflow-y to scroll we can add a vertical
scrollbar to display all content in the specified div. This solution works fine
but whenever a postback occurs on page the div gets back to its original starting
position.
Here in this example, In order to maintain the scrolled position
after postback I retained the div scroll value in hiddenfield using jquery and
after postback get the scroll value from hiddenfield and set back to div to
maintain the scroll position.
Implementation: Let’s create a
sample page from demonstration purpose.
HTML Source Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style
type="text/css">
.divcss {
overflow-y: scroll;
height: 200px;
width: 300px;
}
</style>
<script
src="http://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function
() {
maintainScrollPosition();
});
function pageLoad() {
maintainScrollPosition();
}
function setScrollPosition(scrollValue) {
$('#<%=hfScrollPosition.ClientID%>').val(scrollValue);
}
function maintainScrollPosition() {
$("#dvScroll").scrollTop($('#<%=hfScrollPosition.ClientID%>').val());
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel
ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset style="height: 250px; width: 300px;">
<legend>Maintain scroll
position of div on postback</legend>
<asp:HiddenField ID="hfScrollPosition" Value="0" runat="server" />
<div id="dvScroll" class="divcss" onscroll="setScrollPosition(this.scrollTop);">
1. This is a dummy
text for demonstration<br />
2. This is a dummy
text for demonstration<br />
3. This is a dummy
text for demonstration<br />
4. This is a dummy
text for demonstration<br />
5. This is a dummy
text for demonstration<br />
6. This is a dummy
text for demonstration<br />
7. This is a dummy
text for demonstration<br />
8. This is a dummy
text for demonstration<br />
9. This is a dummy
text for demonstration<br />
10. This is a dummy
text for demonstratio<br />
11. This is a dummy
text for demonstration<br />
12. This is a dummy text
for demonstration<br />
13. This is a dummy
text for demonstration<br />
14. This is a dummy
text for demonstration<br />
15. This is a dummy
text for demonstration<br />
16. This is a dummy
text for demonstration<br />
17. This is a dummy
text for demonstration<br />
18. This is a dummy text for demonstration<br />
19. This is a dummy
text for demonstration<br />
20. This is a dummy
text for demonstration<br />
21. This is a dummy
text for demonstration<br />
22. This is a dummy
text for demonstration<br />
23. This is a dummy
text for demonstration<br />
24. This is a dummy text for demonstration<br />
25. This is a dummy
text for demonstration<br />
26. This is a dummy
text for demonstration<br />
</div>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..