autoscroll to top of page without using history?

8 views
Skip to first unread message

dandante

unread,
Feb 25, 2008, 8:05:22 PM2/25/08
to Google Web Toolkit
Hi,

I came up with what I thought was a smart hack--I have a button at the
bottom of a long page and when it is clicked I want the top of the
page to be visible, like a top anchor in a traditional web page.

For various reasons I wanted to achieve this without using the history
token.

What I did was put an empty FocusPanel at the very top of my page, and
then when the button at the bottom was clicked, I would set focus to
that empty focus panel. It doesn't work in hosted mode but it does in
Firefox (Mac and Win). However, in Mac Safari and Win IE, it only
jumps up a little, not all the way to the top.

Can anyone think of a way to make this work?

Yeah, I know, I should use history....but that would entail changing
the way history is implemented in the app I am working on, and I am
lazy. ;)

Besides, it would be cool if an approach like this could work in cross-
browser fashion.

walden

unread,
Feb 26, 2008, 7:47:05 AM2/26/08
to Google Web Toolkit
dandante,

I'm not sure what your outer container is, but it sounds like all you
need to do is get a handle on it and then set "scrollTop" to zero.

One way to do that is to make sure the outer container is a
ScrollPanel. Then you have the API method setScrollPosition().
Otherwise, you can maybe get the element in question via some
getParent() and getElement() calls, and then use
DOM.setElementPropertyInt(elem, "scrollTop", 0).

Didn't try it, but that's the approach I would use.

Walden

rb

unread,
Feb 26, 2008, 10:29:41 AM2/26/08
to Google Web Toolkit
/**
* Move window back to the top left
*/
public static native void top() /*-{
$wnd.scroll(0,0);
}-*/;



On Feb 25, 8:05 pm, dandante <danda...@gmail.com> wrote:

dandante

unread,
Feb 26, 2008, 2:41:53 PM2/26/08
to Google Web Toolkit
Thanks both of you. Someone emailed me a solution before I returned to
see your responses, and it works.
You create a DIV, either in your host HTML page or by using an HTML
object, and then do this:
Element e = RootPanel.get("topDiv").getElement();
DOM.scrollIntoView(e);

Works great in hosted mode and all other browsers I tested (mac ff/
safari, win ff/ie).

I'll look at these solutions as well.

Thanks a lot!

Peter Blazejewicz

unread,
Feb 26, 2008, 3:07:25 PM2/26/08
to Google Web Toolkit
hi,
in html that is link/anchor pair:
you could use gwt implementation from that post:
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/61e10f6f83b22baa/635243263d78687d?lnk=gst&q=HtmlLink#635243263d78687d
as on regular page: put anchor on top of your current page,
add html link everywhere required with label like "Scroll top"/"Page
top", it does not trigger History item because that is in-page
navigation consumed by browsers,
no javascript required,
regards,
Peter

blissteria

unread,
Feb 27, 2008, 4:32:12 AM2/27/08
to Google Web Toolkit
Hi,

Dandante, I think I'm the one that email you... In fact I didn't want
to mail you personnaly, that was an error. I was surprised my post
didn't appeared in the thread.

By the way, I'm not sure Peter' solution doesn't not trigger the
history mechanism. I tested it and in IE the history mechanism is not
trigerred but in firefox and opera it is triggered...

cheers.

On 26 fév, 21:07, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:
> hi,
> in html that is link/anchor pair:
> you could use gwt implementation from that post:http://groups.google.com/group/Google-Web-Toolkit/browse_thread/threa...

Peter Blazejewicz

unread,
Feb 27, 2008, 3:43:17 PM2/27/08
to Google Web Toolkit
hi,

thanks for that! I've forgot about that,
I had such small project which used existing html markup and injected
gwt module,
There are three different types of links on page, anchors, named
anchors and gwt: hyperlinks,
html page links are trapped with event preview, but only external
(real links) do action, links within domain load content
asynchronously into module, named anchors are not traped to let
browser scroll page for example - they trigger module history listener
as noted on FireFox,
However action is not taken becuase of history listener implementation
(that's clumsy if(condition){} checks for content of token obviously
does not take into considerance named anchors from page)

regards,
Peter
Reply all
Reply to author
Forward
0 new messages