Jump to content
Search Community

scrollTo stepwise

think test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello forum,

 

I'm trying to add a step-by-step ScrollTo button to the given gsap scrollTo example:

When the button is clicked, the content should scroll step-by-step to the following section. In the end, it should scroll back to the first item.

 

This works well when you repeatedly click the button quickly. But when waiting for the animations end, each scrollTo starts from the container top again. I have no idea why this is happening. Maybe someone can give me a tip?

 

The second thing is that I can't get the active class to work.

 

Greeting Torsten

See the Pen PoOREeO?editors=0001 by think2308 (@think2308) on CodePen

Link to comment
Share on other sites

  • Solution

Hi think,

 

It looks like the issue is that your go down link already has a hash on it.

<a href="#one">go down</a>

 

So every time you click, it's automatically going to jump to the first slide. You just need to call preventDefault on the event.

 

down.addEventListener("click", function(e) {
  e.preventDefault();
  
  ...
});

 

  • 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.
×
×
  • Create New...