Maintain Scrollbar Postition in TabPanel of Ajax TabContainer after Postback

How do i maintain the position of scrollbar in tabpanel of Ajax TabContainer after partial postback? So far I tried the following script but it wont retrieve the position.

 <script type="text/javascript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndReq开发者_StackOverflow中文版uestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('<%=InputTabPanel.ClientID%>').scrollLeft;
        yPos = $get('<%=InputTabPanel.ClientID%>').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('<%=InputTabPanel.ClientID%>').scrollLeft = xPos;
        $get('<%=InputTabPanel.ClientID%>').scrollTop = yPos;
    }
</script>

You can include MaintainScrollPositionOnPostback on <%@ Page%> directive, like this:

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>

With this, javascript is automatic generated by ASP.NET. But, if your control is wrapped into a UpdatePanel, there is no reason for a complete postback and a consequent lose of position.

This does indeed work providing you set CombineScripts = True of script control properties and when using a content page put the script or reference to the script file in the BodyContent. See below...

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    ...move script at the top of the BodyContent area        
</asp:Content

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script src="Scripts/site.js" type="text/javascript"></script>

    <div>
        ...markup
    </div>

</asp:Content>

Below is in my site.js file

//-------------------------------------------------------//
// Maintain scroll position in given element or control
//------------------------------------------------------//
var xInputPanel, yInputPanel;
var xProductPanel, yProductPanel;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
    yInputPanel = $get  ('MainContent_Panel1').scrollTop;
    yProductPanel = $get('MainContent_Panel2').scrollTop;
}
function EndRequestHandler(sender, args) {
    $get('MainContent_Panel1').scrollTop = yInputPanel;
    $get('MainContent_Panel2').scrollTop = yProductPanel;
}

Note: You may get an error "Microsoft JScript runtime error: 'Sys' is undefined" if you don't move the js script into the BodyContent. The Script needs to run after the ScriptManager.