jQuery animate scrollTop

Question

I have quite a few section tags in a div with an overflow set to hidden. The code is along the lines of this:

<div id="viewport">
   <section>
      content
   </section>
   <section>
      content
   </section>
</div>

I have it set up like this because I want to be able to scroll through the sections contained within the div when the corresponding link is pressed in the menu. I have this function:

$('#mn a').click(function(){
   var aHref = $(this).attr("href");
   var sectionHeight = $('section'+aHref+'').height();
   $('#viewport').height(sectionHeight);
});

Which I use to resize the #viewport div because the sections are different sizes. When I try to put this scroll part into that function:

$('body,html').animate({scrollTop: $(aHref).offset().top}, 800);

it makes the entire page scroll. When I try to replace $('body,html') with $('section, #viewport') it scrolls inside the div, but it doesn't do so properly.

I have a live example of this here. I assume it has something to do with either the .offset() or what I'm passing into the .animate(), but I've tried quite a few different things but to no avail. Can someone please point me in the right direction or tell me what I've done wrong?

Answer 1

The problem is how position() works, it returns top/height related to scrollTop.

So if you request at click $('section'+aHref+'').position().top the position returned is modified from scrollTop value.

You can get all height position at ready event. (so scrollTop is 0)

Or you can sanitize position values with:

$("section#skills").position().top + $("#viewport").scrollTop()