Issues With Creating A ScrollTo Function

[OneManLaptop 10 Likes (Newbie)]

I'm trying to use the scrollTo plugin to navigate around a div, however I'm getting unexpected behaviour, where the links don't seem to correspond to the element I want to scroll to and seem to erratically scroll along the y axis.

 

As the stripped down example shows, the first three content blocks are anchored to the bottom of the container element, with the final content block being anchored to the top of the container.

 

What I am looking to achieve, is to have the content scroll to the relevant relevant anchor, and where the scroll must move from a top to bottom content block, both the x and y axis are animated simultaneously, not an initial scroll along the x axis, and then a scroll along the y axis.

 

Any help appreciated.

See the Pen PZYRGV?editors=011 by OneManLaptop (@OneManLaptop) on CodePen

[PointC 8,599 Likes (Superhero)]

Hey there OneManLaptop  ,

 

I took a quick look at your pen and it looks like the strange scrolling is caused by your scrollTo position coming from an incorrect offset.

 

You're animating to an offset position, but the offset is changing on each animation. When you click 'two' it scrolls to the second panel, but if you click 'two' again it scrolls back to one because you're asking it to scroll to the new offset of two which is now 0.

 

I'm sure one of the mods will be by shortly and point you in the right direction on your pen. 

[Diaco 1,948 Likes (Superhero)]

Hi OneManLaptop 

 

pls check this out : 

See the Pen dGbgwz by MAW (@MAW) on CodePen

[OneManLaptop 10 Likes (Newbie)]

Hey there OneManLaptop  ,

 

I took a quick look at your pen and it looks like the strange scrolling is caused by your scrollTo position coming from an incorrect offset.

 

You're animating to an offset position, but the offset is changing on each animation. When you click 'two' it scrolls to the second panel, but if you click 'two' again it scrolls back to one because you're asking it to scroll to the new offset of two which is now 0.

 

I'm sure one of the mods will be by shortly and point you in the right direction on your pen. 

 

Thanks for taking the time to look and comment. Anchoring the offSet via an array was definitely the key to fixing it.

 

Hi OneManLaptop 

 

pls check this out : 

See the Pen dGbgwz by MAW (@MAW) on CodePen

 

Excellent, thanks so much, a fixed Pen always helps a lot.

 

So I'm right in saying that by adding the array, you anchored the offset to the correct parent node so it doesn't change on each click, and by using offSetTop rather than jquery.offset.top(); you get the distance relative to the parent rather than the document?

 

Sorry, I've been reading some StackOverflow posts trying to work out the practical differences between our two examples. I know this is a GSAP support forum not a general programming forum, but I really do appreciate the extent and quality of support people like yourself provide. So thanks.