Maintain scroll position when update panel is in master page - asp.net

Question

I have script manager and update panel placed in master page.
<div id="nav">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
</div>
<div id="mainchild">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ContentPlaceHolder ID="HdrContentPlaceholderBody" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
so this div is in master page and my child page has a grid view placed inside a panel.
<asp:Content ID="pagecontent" ContentPlaceHolderID="HdrContentPlaceholderBody" runat="server">
<asp:Panel ID="pnlAssignRole" runat="server" CssClass="popuppnl" Visible="false">
<div class="close-image">
<asp:ImageButton ID="ImageButton2" ToolTip="Close" runat="server" ImageUrl="~/App_Themes/Images/Close1.png" OnClick="btnAsgnCancel_Click" />
</div>
<table width="100%">
<tr>
<td>
<div style="height: 600px; overflow: auto;">
<asp:GridView ID="grdEmpAssigned">
gridview content
</GridView>
</div>
</td>
</tr>
</table>
</asp:Content>
in gridview on rowcommand it causes partial postback , i tried putting this piece of javascript below the updatepanel and also below scriptmanager in master page and in content page also, it did not help.. i think i am not getting where to place this javascript
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
try {
yPos = $get('ctl00_MainContent_scroll').scrollTop;
}
catch (err) { }
}
function EndRequestHandler(sender, args) {
try {
$get('ctl00_MainContent_scroll').scrollTop = yPos;
}
catch (err) { }
}
</script>
please guide me in this.

Answer 1

Please go thorugh this link. That might help you.
http://dotnetcrunch.wordpress.com/2011/08/05/maintain-scroll-position-for-the-whole-page-after-asynchronous-postback/
Here is the code from above link. Put it in your header section of site.
<script type=”text/javascript”>
var xPos, yPos;
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = document.body.scrollLeft;
yPos = documnet.body.scrollTop;
}
function EndRequestHandler(sender, args) {
document.body.scrollLeft = xPos;
document.body.scrollTop = yPos;
}
</script>

Answer 2

After several tryouts/errors and solutions which works only for first timer update event.
Scroll position was maintained but if you scroll after that, scroll position was always restored to first one!
Only working solution for me is:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script type="text/javascript">
var yPos;
var ignoreNextScrollEvent = false;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
window.addEventListener('scroll', (event) => {
if (ignoreNextScrollEvent) {
ignoreNextScrollEvent = false; // Ignore this event because it was done by AsyncPostBackTrigger
return;
}
yPos = document.documentElement.scrollTop;
//console.log('scroll: ' + yPos); // debug only
});
function BeginRequestHandler(sender, args) {
ignoreNextScrollEvent = true;
//console.log('auto begin: ' + yPos); // debug only
}
function EndRequestHandler(sender, args) {
ignoreNextScrollEvent = true;
document.documentElement.scrollTop = document.body.scrollTop = yPos;
//console.log('auto end: ' + yPos); // debug only
}
</script>
<asp:UpdatePanel ID="pnl_update" runat="server">
<ContentTemplate>
// auto updated content ...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tmr_update" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="tmr_update" runat="server" Interval="5000" OnTick="tmr_update_Tick"></asp:Timer>
Hope this helps someone ...