CODEWITHSUNDEEP
javascriptjqueryanimationscrolltop
ayyp
ayyp

Reputation: 6618

jQuery animate scrollTop

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?

Upvotes: 15

Views: 28539

Answers (3)

Ram Patra
Ram Patra

Reputation: 16672

If you want a simple jquery plugin to do this then you can try (AnimateScroll) which currently supports more than 30 easing styles too

Upvotes: -1

InuYaksa
InuYaksa

Reputation: 726

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

Upvotes: 11

ShankarSangoli
ShankarSangoli

Reputation: 69915

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);
});

Upvotes: 8

Related Questions