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()

Answer 2

First of all you should prevent the default behavior of the anchor in order to scroll the page to the top of the page. You can do this by calling preventDefault() method on the event object inside click event handler. Try this

$('#mn a').click(function(e){
   e.preventDefault();

   var aHref = $(this).attr("href");
   var top = $('section'+aHref+'').position().top;
   $('#viewport').animate({scrollTop: top}, 800);
});