Question

I have been at this for hours now and I simply cannot figure it out.

Basically, I have a long list of items that gets populated way down the page. When the user clicks on one of these items, I want to scroll the window back to the very top where the content will be loaded (arguably poor design, I know, but that is a separate issue).

Here are what my scripts look like:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript' src='scripts/jquery.jgrowl.js'></script>
<script type='text/javascript' src='scripts/javascript.js'></script>
<script type='text/javascript' src='scripts/supersized.js'></script>
<script type='text/javascript' src='scripts/effects.core.js'></script>
<script type='text/javascript' src='scripts/jquery.scrollTo-1.4.2-min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>

Here is the HTML of the top of my page:

<div id='header'>
<div id='pagetop'></div>
</div>

And this is the call that fails:

$.scrollTo('#pagetop',800)

It does not produce an error message when I attempt to run this line, so I know scrollTo is being loaded properly, but when I make the call, it simply does nothing.

Any help would be greatly appreciated.

Answer 1

jQuery doesn’t have a scrollTo method. But you can use .scrollTop()^help on an object.

$('#pagetop').scrollTop(800);

Update

If you just want an element to scroll into view, you can use the native DOM method:

$('#pagetop')[0].scrollIntoView();

or even

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

Demo: http://www.jsfiddle.net/UHhDT/

Update 2

jQuerys scrollTop can also be used in .animate().

$(document.body).animate({scrollTop: $('#pagetop').offset().top}, 2000);

For instance:

Demo: http://www.jsfiddle.net/UHhDT/1/