ASP.NET - MantainScrollPositionOnPostback for Chrome and most recent browsers

Ryan

10 years ago

System.Web.HttpException (0x80004005): The application is configured to issue secure cookies - Cause e soluzioni del problema

To keep (or to say it better, to recover) the page scrollbar position after a postback is definitely a feature any form-containing page should have. This used to be a trival task for any ASP.NET developer, who could just by add a simple configuration parameter to their code:

On web.config level: <pages maintainScrollPositionOnPostBack="true" />

On page level: <%@ Page MaintainScrollPositionOnPostback="true" %>

On code-behind level: Page.MaintainScrollPositionOnPostBack = true;

Unfortunately all these methods, other than being unavailable with Razor, aren't working anymore with any recent non-IE browser. Sure, it's still possible to detect and configure the behavior of each one of them by using the ASP.NET Browser Definition Files accordingly, but in order to achieve better results it's advised to adopt a centralized, versatile solution. Here's a simple script based on the popular jQuery framework who does the trick in a cross-browser compatible way:

For WinForms:

<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
    $(function () {
        var f = $("#<%=hfPosition.ClientID%>");
        window.onload = function () {
            var position = parseInt(f.val());
            if (!isNaN(position)) {
                $(window).scrollTop(position);
            }
        };
        window.onscroll = function () {
            var position = $(window).scrollTop();
            f.val(position);
        };
    });
</script>

<asp:HiddenField runat="server" ID="hfPosition" Value="" />

$(function () {

var f = $("#<%=hfPosition.ClientID%>");

window.onload = function () {

var position = parseInt(f.val());

if (!isNaN(position)) {

$(window).scrollTop(position);

}

};

window.onscroll = function () {

var position = $(window).scrollTop();

f.val(position);

};

});

</script>

For Razor (and also for any web page, since it's pure HTML+JS):

<input id="hfPosition" name="hfPosition value="" />
<script type="text/javascript">
    $(function () {
        var f = $("#hfPosition");
        window.onload = function () {
            var position = parseInt(f.val());
            if (!isNaN(position)) {
                $(window).scrollTop(position);
            }
        };
        window.onscroll = function () {
            var position = $(window).scrollTop();
            f.val(position);
        };
    });
</script>