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.
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/
you can use .scrollTop()
精彩评论