Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
erickcouto

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

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

Hi Guys, thanks for help me.

 

 

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

Link to comment
Share on other sites

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.

:)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×