Jump to content
GreenSock

walpolea

ScrollSmoother with jump links does not work

Recommended Posts

Looking for guidance on how to handle jump links on a page within ScrollSmoother. The default behavior of a jump link moves the scrollbar down the page but ScrollSmoother does not update its progress accordingly, allowing you to no longer scroll up from where you jumped to and scrolling too far beyond the end of the page.

See the Pen BaJrQLj by walpolea (@walpolea) on CodePen

Link to comment
Share on other sites

thanks for the demo, if you keep things in the GSAP family with ScrollTo Plugin it seems to work great

 

See the Pen abEYBwR?editors=1010 by snorkltv (@snorkltv) on CodePen

 

Someone from team @GreenSock can address if there is another approach or known caveats with the native behavior

  • Like 1
Link to comment
Share on other sites

Thanks, that does work if I were to change the link to a button and not use the default behavior of a jump link (which adds the hash to the url bar and such). I can go this route as a last resort, but I think I would prefer to have a solution that allows that native behavior of a jump link to work.

Link to comment
Share on other sites

The native behavior is not possible as the scroller is translating the content up, sot the browser is going to report the wrong position for the hash. You can still use the hash and <a> tags, but you need to preventDefault on them and use ScrollSmoother's scroll method.

 

  • Like 2
Link to comment
Share on other sites

Thank you for confirming that. I've got this in place and working for the moment, however it's poor practice to click-jack a link at all, so I may switch to a button.

 

document.querySelectorAll("a[href^='#']").forEach((a) => {
  a.addEventListener("click", (e) => {
    e.preventDefault();
    ScrollSmoother.get().scrollTo(a.hash, true);
    window.history.pushState({}, "", a.hash);
  });
});

window.addEventListener("load", (e) => {
  if (window.location.hash) {
    ScrollSmoother.get().scrollTo(window.location.hash, true);
  }
});

 

  • Thanks 1
Link to comment
Share on other sites

1 minute ago, walpolea said:

I've got this in place for the moment, however it's poor practice to click-jack a link at all, so I may switch to a button.

 

Eh... it's also probably a bad practice to smooth scroll a page 😉

 

I personally would just keep them as links because I like to see the destination of a link in the bottom corner of the screen when I hover over something.

 

image.png

 

4 minutes ago, walpolea said:

 

document.querySelectorAll("a[href^='#']").forEach((a) => {
  a.addEventListener("click", (e) => {
    e.preventDefault();
    ScrollSmoother.get().scrollTo(a.hash, true);
    window.history.pushState({}, "", a.hash);
  });
});

window.addEventListener("load", (e) => {
  if (window.location.hash) {
    ScrollSmoother.get().scrollTo(window.location.hash, true);
  }
});

 

That looks good! Thanks for sharing. 

 

  • Like 1
Link to comment
Share on other sites

You're definitely not wrong there about smooth scrolling a page, some really gut-wrenching implementations out there. Though I'm very impressed in ScrollSmoother maintaining accessibility and experience consistency across devices, which is what led to me trying it out.

  • Like 2
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.
×