Please disable your adblock and script blockers to view this page
 

How to maintain scroll position of HTML Div on postback in Asp.Net using jquery

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.
How to maintain scroll position of HTML Div on postback in Asp.Net using jquery

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.
Previous
Next Post »

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.. ConversionConversion EmoticonEmoticon