Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

jQuery Scroll To Top

I have a div that I want to scroll to the top of the page after 5 seconds but for some reason I am not getting it.  I have a div, homepage-section-3.  It is far down the page but after five seconds I want it to scroll to the top.  You should still be able to scroll after that.

<script>
setTimeout(function () {
$("#homepage-section-3").scrollTop(0);
}, 5000);

Open in new window

Avatar of Rob
Rob
Flag of Australia image

it may have already run before you've even got to the div?

What triggers the setTimeout?  the page load or another user action?

Do you have a link or demo that we could look at?
Try like below:
$(document).ready(function() {
    setTimeout(function () {
		$("#homepage-section-3").scrollTop(0);}, 
	5000);
});

Open in new window

scrollTop does not work the way you think it does.

You need to do something like this
$('body').animate({scrollTop: $("#homepage-section-3").position().top});

Open in new window

i.e. scroll the body to the top of the <div>

There are some issues with this in FireFox though - you need to add the following CSS to get it to work.

<style type="text/css">
html, body { 
  overflow: hidden; 
  height: 100%; 
}
body { 
  overflow: auto;
}
</style>

Open in new window

Working sample here
Avatar of Robert Granlund

ASKER

@ Julian.  This example does not work in Chrome


http://inspyrus.baycreative.com/
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial