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?