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?

score 11 · Accepted Answer · edited Apr 02 '13 at 14:38

11

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

edited Apr 02 '13 at 14:38

Belladonna

3,824
2
24
33

answered Dec 13 '11 at 22:58

InuYaksa

726
6
10

ShankarSangoli · Answer 2 · 2011-12-13T22:49:22.120

8

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

edited Dec 13 '11 at 22:49

answered Dec 13 '11 at 22:41

ShankarSangoli

69,612
13
93
124

I had the `e.preventDefault()` in there, but I thought it was messing something up for some reason so I took it out. Unfortunately the solution you've proposed doesn't work either. – ayyp Dec 13 '11 at 22:44
Can you alert `sectionHeight` and see what you get? – ShankarSangoli Dec 13 '11 at 22:45
255 for the first one. It makes it scroll back and forth, but never completely to the bottom. – ayyp Dec 13 '11 at 22:47
I hosted it here: http://andrewpeacock.tumblr.com/testingscroll2 Right after loading, if I click on any of the links it works perfectly. After that it no longer works though. – ayyp Dec 13 '11 at 22:52

score -1 · Answer 3 · answered Sep 12 '13 at 09:27

-1

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

answered Sep 12 '13 at 09:27

Ram Patra

16,266
13
66
81

jQuery animate scrollTop

3 Answers3