[TriLUG] Screen movement in JS

Lucas Myers lucas at unthunk.com
Wed Sep 1 21:28:44 EDT 2010


I'm assuming that you are using anchors and links to to anchors to drop the
user to various points on the page, e.g. foo.com/index.html#bar and that you
are calling window.scrollTo as the page is loading:

<script type="text/javascript">
window.scrollTop(0,0);
</script>

Since the DOM hasn't completed loading the page won't have rendered out yet
and the scrollTo won't work (it's part of the DOM 0 specification -
https://developer.mozilla.org/en/DOM/window.onload).  You can wrap the
scrollTo in a window.onload, which will prevent the script from running
until the DOM an all elements (images, scripts, etc) on the page have
loaded.

<script type="text/javascript">
window.onload  = function() {
    window.scrollTo(0,0);
};
</script>

The caveat is that a slow loading image, etc. will block execution of the
script, even if the DOM is ready and the page has been otherwise rendered,
which may be visibly noticeable - the page could scroll after is has been
visible for however long it takes the image to load.  Because of this and
other reasons, many developers prefer to fire their scripts of as soon as
the DOM is ready instead of waiting for everything to load in.  If you don't
mind adding the overhead of a JavaScript library, most of them offer an easy
cross-browser compatible way of firing scripts off when the DOM is ready.
In jQuerry, its as simple as using $(function(){//your code here});

As far as you buttons not working, I'm not sure what's going on.  Have you
tried running window.scrollTo(0,0) directly in the Firebug console?

Lucas


On Wed, Sep 1, 2010 at 5:45 PM, Brian McCullough <bdmc at bdmcc-us.com> wrote:

> Folks,
>
> Here's a slightly different one for the gurus in the group.
>
> I have project that I am working on, and sometimes the users get dropped
> into a page part way down the screen.  Sometimes that happens to be on
> completely blank territory, but in any case, they really don't know what to
> do.
>
> I would like to be able to programatically scroll the screen to the top as
> they enter when this happens.
>
> I have been doing a lot of reading, both on paper and on screen, and trying
> various examples.
>
> window.scroll( x, y ) doesn't seem to do anything, and neither does
> window.scrollTo( x, y ).
>
> I have also created buttons that issue those commands, but nothing ( except
> firing the breakpoint in Firebug ) happens when I click on them.
>
>
> Any bright ideas?
>
>
> Thanks,
> Brian
>
>
> --
> This message was sent to: Lucas <lucas at unthunk.com>
> To unsubscribe, send a blank message to trilug-leave at trilug.org from that
> address.
> TriLUG mailing list : http://www.trilug.org/mailman/listinfo/trilug
> Unsubscribe or edit options on the web  :
> http://www.trilug.org/mailman/options/trilug/lucas%40unthunk.com
> TriLUG FAQ          :
> http://www.trilug.org/wiki/Frequently_Asked_Questions
>



More information about the TriLUG mailing list