Scroll to position on SharePoint Visual Web part after AJAX UpdatePanel postback

Question

I've written a SharePoint 2010 Visual Web Part that uses ASP.NET AJAX to do partial postbacks within an update panel. Within the web part is a search function where the user enters search terms and hits a Button control within the UpdatePanel that queries a web service and binds the results to a GridView, also within the same UpdatePanel. I'd like to have the page scroll to the top of the grid after the data is bound to the GridView.

Markup (abbreviated):

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" EnableViewState="true">
  <ProgressTemplate>
    <div id="progressBackgroundFilter"></div>
    <div id="processMessage">
      <h1>Processing<img src="/_layouts/WebPart/ajax-loader.gif" alt="" /></h1>
    </div>
  </ProgressTemplate>
  <asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" Text="Search" Visible="true" ValidationGroup="SearchGroup" />
  <asp:GridView ID="InstancesGrd" runat="server" Visible="false" AutoGenerateColumns="false" OnRowCommand="InstancesGrd_RowCommand" GridLines="Vertical" BorderColor="White" CssClass="grid">
  </asp:GridView>
</asp:UpdatePanel>

Codebehind (abbreviated):

protected void btnSearch_Click(object sender, EventArgs e)
{
  ServiceClient client = ConfigureServiceProxy();
  List<string> data = client.returnResults();
  InstancesGrd.DataSource = data;
  InstancesGrd.DataBind();
  InstancesGrd.Visible = true;
}

javascript code:

<script type="text/javascript">
    _spOriginalFormAction = document.forms[0].action;
    _spSuppressFormOnSubmitWrapper = true;  
</script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
    function pageLoad() {        

    $('.leftItem').hover(
        function () {
            $('ul', this).css('display', 'block');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/leftNavHover.gif")');
        },
        function () {
            $('ul', this).css('display', 'none');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/navBarLeft.gif")');
        }
    );
    $('.rightItem').hover(
        function () {
            $('ul', this).css('display', 'block');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/rightNavHover.gif")');
        },
        function () {
            $('ul', this).css('display', 'none');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/navBarRight.gif")');
        }
    );
    $('.middleItem').hover(
        function () {
            $('ul', this).css('display', 'block');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/middleNavHover.gif")');
        },
        function () {
            $('ul', this).css('display', 'none');
            $(this).css('background-image', 'url("_layouts/testclientwebpart/navBarMiddle.gif")');
        }
    );
        }

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest); Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

  function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
  }
  function pageLoaded(sender, args) {
    if (typeof (postbackElement) === "undefined") {
      return;
    }
    if ((postbackElement.id) === "ctl00_SPWebPartManager1_g_d2fd9460_f326_4df6_92c5_7afd7da02faa_ctl00_btnSearch") {
      //--- Scroll test -- does not work
      window.scrollTo(750, 0);
    }
  }
</script>

I've tried using the ClientScriptManager.RegisterStartupScript on the server side and the PageRequestManager.getInstance().add_beginRequest() and add_pageLoaded() to add javascript event handlers to the Button's onclick client side function. I was able to trigger alerts from both but unable to reset the scroll position.

Am I missing something?

Answer 1

What you are trying to achieve will become more simpler with internal anchor links like this

<a name="scrollTo1"></a>.

You need to place this links at the places where you want to scroll to.

Once you get these kind of tags setup at appropriate locations in your page, you can set current url to url#scrollTo1 to scroll to that section using javascript.

Answer 2

Try placing your call into SharePoint specific function _spBodyOnLoadFunctionNames

  function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
  }
  function pageLoaded(sender, args) {
    if (typeof (postbackElement) === "undefined") {
      return;
    }
    if ((postbackElement.id) === "ctl00_SPWebPartManager1_g_d2fd9460_f326_4df6_92c5_7afd7da02faa_ctl00_btnSearch") {
      //--- Scroll test -- does not work
      //window.scrollTo(750, 0);
      _spBodyOnLoadFunctionNames.push("scrollToTop");
    }
  }
  function scrollToTop()
  {
    window.scrollTo(750, 500);
  }
</script>

Answer 3

I did eventually come upon the answer for this, or at least the reason why it was failing. The master page for this piece had settings that changed the behavior from the default behavior. I've since changed jobs so I unfortunately forgotten what I did to fix it, but the new master page disabled programmatic scrolling. Once I was using the same master page in production and development I was able to fix the problem.