javascript - How to scroll to a div id in GWT - Stack Overflow

I have a webpage with an iframe in which a gwt application is running. The webpage has a <div id="head">. It is not possible to scroll in the iframe (intended) so the webpage has for example a height of 1000px. At the very bottom there is a button and I want that when someone clicks on that button (note: the button is in the gwt application) then I want to scroll to the top.

That means that the iframe needs to force the parent window to scroll to the top. I tried it with a jsni function like this:

    public static native void scrollToTop()  /*-{
        $wnd.top.scrollTo(0,0);
    }-*/;

But this didn't work. So my new idea is to scroll to the div id "header". Does anyone know how to acplish this?

I tried it like this:

document.getElementById('header').scrollIntoView();

But that seems not to work (because it should be in a JSNI manner?).

Thanks for any inputs!

I have a webpage with an iframe in which a gwt application is running. The webpage has a <div id="head">. It is not possible to scroll in the iframe (intended) so the webpage has for example a height of 1000px. At the very bottom there is a button and I want that when someone clicks on that button (note: the button is in the gwt application) then I want to scroll to the top.

That means that the iframe needs to force the parent window to scroll to the top. I tried it with a jsni function like this:

    public static native void scrollToTop()  /*-{
        $wnd.top.scrollTo(0,0);
    }-*/;

But this didn't work. So my new idea is to scroll to the div id "header". Does anyone know how to acplish this?

I tried it like this:

document.getElementById('header').scrollIntoView();

But that seems not to work (because it should be in a JSNI manner?).

Thanks for any inputs!

• javascript
• gwt
• iframe
• scroll
• jsni

Share Improve this question Follow edited Oct 12, 2011 at 15:33 Hilbrand Bouwkamp 13.5k11 gold badge4747 silver badges5252 bronze badges asked Oct 12, 2011 at 12:46 mknmkn 13.2k1717 gold badges5252 silver badges6565 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

It fails because GWT runs in an iframe, so document references the GWT's iframe, and not your "HTML host page". You have to use $doc in JSNI to reference the document (just like $wnd instead of window).

But you actually don't need JSNI for that; plain old Java/GWT will do:

Document.get().getElementById("header").scrollIntoView();

Finally I found the solution. You have to set an anchor at the top of your website (the website inside the iframe). Please look at my other post for more details.

P.S. I hope you see the importance of this post and upvote it. It will save a lot of time for other people.