locked
Page load, browser return to location of post back start RRS feed

  • Question

  • User-1668014665 posted

    Asp net 2.0, asp net forms,  MSVS 2005, vb net

    I have a deep asp net forms page, a page load is forced when a button or link button is clicked, when page loads, the browser goes back to the top, forcing user to scroll down to find error or success message.

    Question: How can I return the user to location of browser after post back page load, deep in the page ( ie off screen, low down)

    FYI  I am using master pages

    Any ideas

    Wednesday, March 13, 2019 5:56 AM

Answers

  • User-893317190 posted

    Hi icm63,

    Because your problem relates to operate window object , I suggest you could use  javascript to save scroll information of your page.

    Below is my code. Here I use  sessionStorage to store scroll information, you could also use localStorage, for the difference , please refer to https://stackoverflow.com/questions/5523140/html5-local-storage-vs-session-storage

    You should also pay attention , because sessionStorage is html5 attribute , so  lower version of ie may not support it.

    <script
      src="http://code.jquery.com/jquery-1.12.4.min.js"
     ></script>
    <body>
        <form id="form1" runat="server">
            <div style="height:2000px"></div>
            <span>this is bottom</span>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </form>
    
    </body>
        <script>
            window.onbeforeunload = function () { // before post back, save the scroll information , $(window).scrollTop() is used to get scrollY of window
                sessionStorage.setItem("wwww.myproject.com.scroll", $(window).scrollTop());//wwww.myproject.com.scroll is the key, you could specify what you like,but to prevent duplication, I set a complex one.
            }
            window.onload = function () { // when page load , get the saved information , and restore scroll
                var y = sessionStorage.getItem("wwww.myproject.com.scroll");
                if (y) {
                    window.scrollTo(0, parseFloat(y));
                }
            }
        </script>
    </html>
    

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 13, 2019 8:20 AM

All replies

  • User-1038772411 posted

    After return your model error or success you can place above code in your ajax success or error call.

    $("html, body").animate({ scrollTop: $(document).height() - $(window).height() });

    Wednesday, March 13, 2019 8:07 AM
  • User-893317190 posted

    Hi icm63,

    Because your problem relates to operate window object , I suggest you could use  javascript to save scroll information of your page.

    Below is my code. Here I use  sessionStorage to store scroll information, you could also use localStorage, for the difference , please refer to https://stackoverflow.com/questions/5523140/html5-local-storage-vs-session-storage

    You should also pay attention , because sessionStorage is html5 attribute , so  lower version of ie may not support it.

    <script
      src="http://code.jquery.com/jquery-1.12.4.min.js"
     ></script>
    <body>
        <form id="form1" runat="server">
            <div style="height:2000px"></div>
            <span>this is bottom</span>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </form>
    
    </body>
        <script>
            window.onbeforeunload = function () { // before post back, save the scroll information , $(window).scrollTop() is used to get scrollY of window
                sessionStorage.setItem("wwww.myproject.com.scroll", $(window).scrollTop());//wwww.myproject.com.scroll is the key, you could specify what you like,but to prevent duplication, I set a complex one.
            }
            window.onload = function () { // when page load , get the saved information , and restore scroll
                var y = sessionStorage.getItem("wwww.myproject.com.scroll");
                if (y) {
                    window.scrollTo(0, parseFloat(y));
                }
            }
        </script>
    </html>
    

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 13, 2019 8:20 AM
  • User409696431 posted

    For a basic webforms project, adding MaintainScrollPositionOnPostback="true" to the page declaration or to the page section of the web.config, if you want it for all pages, should do what you want. (https://weblogs.asp.net/hosamkamel/maintain-scroll-position-after-postbacks-in-asp-net-2-0 )

    If you have ajax calls, an update panel, etc. it gets more complicated.

    Wednesday, March 13, 2019 8:47 AM
  • User-1668014665 posted

    Great idea

       <script>
            window.onbeforeunload = function () { // before post back, save the scroll information , $(window).scrollTop() is used to get scrollY of window
                sessionStorage.setItem("wwww.myproject.com.scroll", $(window).scrollTop());//wwww.myproject.com.scroll is the key, you could specify what you like,but to prevent duplication, I set a complex one.
            }
            window.onload = function () { // when page load , get the saved information , and restore scroll
                var y = sessionStorage.getItem("wwww.myproject.com.scroll");
                if (y) {
                    window.scrollTo(0, parseFloat(y));
                }
            }
        </script>

    Question XU is there a method to CLEAR the 'sessionStorage' memory? Or remove it by KEY name?

    https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

    Wednesday, March 13, 2019 4:58 PM
  • User-893317190 posted

    Hi icm63,

    Yes, sessionStorage has, please refer to https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

    Best regards,

    Ackerly Xu

    Thursday, March 14, 2019 12:57 AM