Monday, April 26, 2010

Force the browser to scroll to the top using Silverlight

I recently had an master / details scenario where the details popup was much larger than the master control. If I all the way down in the details popup and then returned to the master control, the browser would maintain the scrolling position and the master control would no longer be visible unless I scrolled up. Fortunately Silverlight provides a mechanism for calling JavaScript functions. ;)

Steps:

1.  Add a top anchor tag to the top of the HTML page rendering your Silverlight object.

     <a name=”top” />

2.  Add a JavaScript function to the same page.

     function ScrollToTop { location.href=”#top”; }

3.  Use the following code to call from Silverlight:

     using System.Windows.Browser;
     …
     HtmlPage.Window.Invoke(“ScrollToTop”);

Note: I tried using “windows.scroll(0, 0)” in my JavaScript function to no avail, but using an anchor tag worked just fine.

2 comments:

  1. I tried windows.scroll(0,0) to, but it ignored me. When I try your solution, I get an error in the debugger. Any idea what causes it?

    Navigation is only supported to relative URIs that are fragments, or begin with '/' or which contain ';component/'.

    ReplyDelete
  2. I haven't fully tried this, but you have a syntax error in the function declaration. You need () after the name, then the squiggly bracket.

    function ScrollToTop ()
    {

    }

    ReplyDelete