Jump to content
Search Community

Scroll Trigger with Snapping sections causing issues with Back to top Button

djarosz test
Moderator Tag

Recommended Posts

Hello GSAP Team,

 

I'm new to Scroll Trigger and having issues trying to scroll back to the top of the page.  I've created a snapping section in the middle of the page that acts like a "road block". That works well.

 

At the bottom of the page, I have a button that scrolls you user back to the top of the page when clicked on. Here lies the issue. Once the scroll reaches the top of the page, it then starts scrolling back down to the snapping section.

 

I need it to stay at the top with out it scrolling back down. 

 

Thanks!

 

See the Pen abJoyjJ by DariuszJ (@DariuszJ) on CodePen

Link to comment
Share on other sites

Hi @elegantseagulls,

 

Thank you for getting back to me so quickly and looking into the issue. In my codepen example I'm using the disable() functionality on the click event of the "back-to-top" button and then onComplete of the scroll using enable() functionality. 

 

 

// Scroll to top Button
const scrollTopBtn = document.querySelector('.btn-top');

var enableGsap = function () {
	ScrollTrigger.getAll().forEach(test => test.enable());
}

scrollTopBtn.addEventListener('click', function () {
  
  ScrollTrigger.getAll().forEach(test => test.disable());
    gsap.to(window, {
        duration: 1.5, 
        scrollTo: {
          y: 0,
          x: 0,
          autoKill: true
        },
      onComplete: enableGsap
    });
});

 

Let me know if I'm doing something incorrectly.

 

Thanks!

  • Like 1
Link to comment
Share on other sites

Yeah, that's because it remembered the state of the ScrollTriggers from when you disabled them. So if their progress was all at 1 when you disabled them, and then you scroll the page all the way back to the top and then enable() them, that means their progress just went from 1 to 0, triggering the onEnterBack. And then it jumped to that first section because of your onEnterBack on the last one that triggered. 

 

I've updated ScrollTrigger so that by default, it resets the progress values when you re-enable. You can test out a preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

In the meantime, you could add these (undocumented) lines of code before your enable(): 

test.enabled = true;
test.revert();
test.enable();

(that's totally a hack, though - there's no guaranteed support for that in future versions :))

 

Or you could add logic in your code to ignore the calls when a flag is set (set it before and after you .enable()). Or just use the new beta version. 

  • Like 2
Link to comment
Share on other sites

Just to piggyback on this same topic.

 -On page reload/refresh or when I'm navigation back to the page it takes me back down to the ScrollTriiger section with the callbacks.

@GreenSock  - anyway to prevent the "onEnterBack" callback from firing on page reload/refresh?

Link to comment
Share on other sites

 

Hey @djarosz

 

I'm not 100% sure if that solution will work in your case, but you could try and use a check on a boolean variable inside the callbacks to prevent the ScrollTriggers from firing on page-load just as suggested in this thread here - which is dealing with a pretty similar scenario as yours, if I am not mistaken. Maybe give it a shot and let us know if it helps.

 

 

 

Link to comment
Share on other sites

Thanks for the reply back.  The issue is not in CodePen. It's happening when you're on an actual webpage and you try to refresh/reload the page after scrolling past the snapped sections. 

 

The result:  On refresh/reload takes the user back to the snapped section.

 

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