Maintain Scroll Bar position of a div within a gridview after a PostBack

Question

I used the following piece of code in the web.config in order to maintain the scrollbar position after a server postback:

Answer 1

You can do what you want, but it will need to be done client-side with something like jQuery. The following tutorial uses jQuery to determine the value of the scrollbar within your GridView control and then restore that value every time the $(document).ready function is called. In this manner your scroll bar will be reset to it's position before the postback as you wish.

Easily maintaining scroll position in GridView using jQuery

Answer 2

I dont have a long long explanation and any explanation, the most important part is these codes work on my project.

<script  type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position

function BeginRequestHandler(sender, args) 
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
} 
</script>

this is from http://www.codeproject.com/Articles/30235/Maintain-GridView-Scroll-Position-and-Header-Insid

Answer 3

Try this,

 <script type="text/javascript">
  window.onload = function () {
               var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
               document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
              }
   function SetDivPosition() {
           var intY = document.getElementById("<%=scrollArea.ClientID%>").scrollTop;
           var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
           h.value = intY;
     }

  function afterpostback() {

            var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
            document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;

     }

</script> 

 <asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
 <div id="scrollArea" onscroll="SetDivPosition()"   runat="server"  style="height:225px;overflow:auto;overflow-x:hidden;"> 

In the Page_Load

if (Page.IsPostBack) {
    ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "afterpostback();", true);
    }

Answer 4

For future reference:

The normal procedure is to write the following in the web.config file:

  <system.web>
    <pages maintainScrollPositionOnPostBack="true" >
    </pages>
  </system.web>

This will preserve the scroll bar position of all web pages.

If you have a scroll bar within a gridview (or div) then use the following script:

<script type="text/javascript">
    window.onload = function () {
        var strCook = document.cookie;
        if (strCook.indexOf("!~") != 0) {
            var intS = strCook.indexOf("!~");
            var intE = strCook.indexOf("~!");
            var strPos = strCook.substring(intS + 2, intE);
            document.getElementById("grdWithScroll").scrollTop = strPos;
        }
    }
    function SetDivPosition() {
        var intY = document.getElementById("grdWithScroll").scrollTop;
        document.cookie = "yPos=!~" + intY + "~!";
    }
</script>

And the div must be as follows:

<div id="grdWithScroll" …………  onscroll="SetDivPosition()">

http://michaelsync.net/2006/06/30/maintain-scroll-position-of-div-using-javascript-aspnet-20