Jump to content


Jumping from section a to z when using scrollTrigger section layering

Go to solution Solved by akapowl,

Recommended Posts

currently i have a landing page with a layered section, similar with the codepen URL i mentioned.

the difference is, i have a navigation bar on the top of my page.

i've been wondering how can i jump from section one section to another with a navigation bar.


for example, when i am on the first panel and trying to jump to fourth panel,
at the end of the animation, the scroll is jumping back from fourth to the third panel


(i choose to use a target element instead of `y * inner height` because i want to skip some panel for the navbar)



See the Pen WNGbBmq by rifkiachmads (@rifkiachmads) on CodePen

Link to comment
Share on other sites

  • Solution

Hey @blubububub


You could integrate some sort of check on the callbacks to detect wether a button was clicked or not, and only if that is not the case, fire what's inside the callbacks of your ScrollTriggers. This way, they will only get triggered when not navigating the page via your nav-buttons.


See the Pen 76a69a09b2e78cd1995779310b2edd6b by akapowl (@akapowl) on CodePen






You will also notice similar behaviour to what is mentioned in this thread though (in your demo), when reloading the page while you are in a section further down. So I also integrated a varaible to check for wether the page is settingUp - seems to work.




  • Like 3
  • Thanks 1
Link to comment
Share on other sites

nicee, a very simple solution.
why i couldn't think of that? haha

i love how peoples on this forums reply quickly
Thanks! @akapowl

  • 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.