walpolea Posted April 6, 2022 Share Posted April 6, 2022 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 More sharing options...
Carl Posted April 6, 2022 Share Posted April 6, 2022 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 1 Link to comment Share on other sites More sharing options...
Carl Posted April 6, 2022 Share Posted April 6, 2022 oh, and if you check the docs it looks like SmoothScroller also has its own scrollTo method See the Pen KKXZOyZ by GreenSock (@GreenSock) on CodePen https://greensock.com/docs/v3/Plugins/ScrollSmoother 3 Link to comment Share on other sites More sharing options...
walpolea Posted April 6, 2022 Author Share Posted April 6, 2022 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 More sharing options...
OSUblake Posted April 6, 2022 Share Posted April 6, 2022 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. 2 Link to comment Share on other sites More sharing options...
walpolea Posted April 6, 2022 Author Share Posted April 6, 2022 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); } }); 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 6, 2022 Share Posted April 6, 2022 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. 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. 1 Link to comment Share on other sites More sharing options...
walpolea Posted April 6, 2022 Author Share Posted April 6, 2022 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now