jQuery Animate Div Scroll back to top

Question

I have a div which has the content:

<div id="First">There are lots of content in here. Blah Blah Blah...</div>

The div has a style attribute of overflow:auto; so if any content were to overflow, a scrollbar would appear. I have a button inside the div at the end of the content.

Since the content inside the div could allow for a deep scroll, is there anyway, that on click of the button it will move the scroll back to the top of the div?

Answer 1

Yes. Use scrollTop

Just provide your element and a value of 0 like this:

$('#id').scrollTop(0);

You can also animate the scrolling back to top like this:

$('#id').animate({
   scrollTop: 0
}, 'slow');

Answer 2

You do not need jQuery (or even JavaScript) for this.

DEMO

Define an anchor name:

<a name="top"></a>

And create a link to this anchor at the bottom:

<a href="#top">back to top</a>​