scrollTo TweenMax Doesn't stop exactly on the hash with menu fixed on the top

[erickcouto]

I have a problem with plugin scrollTo (tweenMax), When I click on the menu link and the website slide to the section ID that I chose on menu. But the website doesn't stop on begin of the section, and I need to show the h2 (Title).

My Code

$(function scrollTop(){

var wrapper = $("#wrapper"),
    $menu = $("#menu");

$menu.on("click","li", function(){
var $this = $(this),
href = $(this).find("a").attr("href"),
     topY = $(href).offset().top,
extraOffset = $menu.hasClass('fixar') ? 75 : 0;

   TweenLite.to(window, 2, { scrollTo: { y: topY - extraOffset, x: 0}, ease: Cubic.easeIn });

 return false;
});

}); 

 Mobile doesn't working too ... =/

 

 

See the Pen XpLwLq by erickcouto (@erickcouto) on CodePen

[PointC]

Hi erickcouto 

 

Welcome to the GreenSock forum.

 

We don't have the resources to dig through entire websites so if you could make a simplified CodePen demo that shows the problem, we'd be happy to help troubleshoot the issue. Here's some more info about creating a demo.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

That being said, you don't have to calculate those window positions with offset().top. ScrollTo allows you to drop an element in as the target. You can also set an x and/or y offset in the tween. So something like this:

TweenMax.to(window, 1, {scrollTo:{y:"#yourID", offsetY:75}});

Here's some more info about ScrollTo:

 

https://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/

 

Happy tweening.

[Jonathan]

Hello erickcouto, welcome to the GSAP forum!

 

Here is an example of using he ScrollToPlugin with a hash for the ID like PointC advised:

 

See the Pen AsLfc by jonathan (@jonathan) on CodePen

 

Happy Tweening

[erickcouto]

Hi Guys, thanks for help me.

 

 

I put an URL - Code pen in my post above =D

[PointC]

o.k. - I looked at your pen and see the issue.

 

If you manually scroll to a point where your menu is fixed and then click a link, everything seems to work fine for me.

 

If you click one of the links before manually scrolling, the ScrollTo plugin will make it's calculations, but your menu changes to fixed part way through that scroll so the animation will be off by the height of that menu. You need to either keep that menu fixed all the time or change your logic to account for that position change. I also noticed you were using old versions of jQuery, TweenMax and ScrollTo. Please use these in your project. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/ScrollToPlugin.min.js"></script>

Happy tweening.