Mlbb lan Posted October 27, 2020 Share Posted October 27, 2020 Hi. I apologize in advance for asking a question not quite on the topic of GSAP. This topic maybe of interest to many who use smooth scrolling. Before writing here, I tried to solve the problem on github, but without success. Nobody answered me within a month. my question is very simple: I use smoothScrollbar (https://idiotwu.github.io/smooth-scrollbar/) and I want to implement anchor links, but I have not found a solution. However, I was able to implement anchor links with another library: locomotive scroll. I just used this code const slider= document.querySelector('#main-2'); $('.link:nth-child(2)').on('click', function() { locoScroll.scrollTo(slider) }); however, the same operation was not useful for smoothscrollbar. In my montage, everything breaks down. If someone has an example on codepen please share it. See the Pen bGeWNOE by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted October 27, 2020 Share Posted October 27, 2020 Hey @GeS in idiotwu's API documentation for smooth-scrolbar you can find that it has its own scrollTo method and how it works https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md#scrollbarscrollto To make it work, you will have to get the position/offset of the element you want to scroll to const slider= document.querySelector('#main-2'); var scrollToHere = slider.offsetTop; $('.link').on('click', function() { bodyScrollBar.scrollTo(0, scrollToHere, 1000); }); See the Pen fed2f618a11dd60db01b83e7b6d1e66e by akapowl (@akapowl) on CodePen Hope this helps. Cheers, Paul 4 Link to comment Share on other sites More sharing options...
Mlbb lan Posted October 27, 2020 Author Share Posted October 27, 2020 why am i so inconsiderate? Thank you again! I will certainly show you my project when I finish, without your help I would not have achieved such a result!) I will mention you in my project! 2 Link to comment Share on other sites More sharing options...
leomaubert Posted December 18, 2021 Share Posted December 18, 2021 Hi @akapowl! Thank you for you help. I would like to know if it is possible to add multiple anchor links? I tried to find a solution by duplicate the const slider but it doesn't work. Here a sneak peek of my attempt. gsap.registerPlugin(ScrollTrigger); let bodyScrollBar = Scrollbar.init(document.querySelector("#my-scrollbar"), { damping: 0.1, }); ScrollTrigger.scrollerProxy("#my-scrollbar", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, }); bodyScrollBar.addListener(ScrollTrigger.update); const slider= document.querySelector('#anchor1'); var scrollToHere = slider.offsetTop; $('.button1').on('click', function() { bodyScrollBar.scrollTo(0, scrollToHere, 1000);}); const slider= document.querySelector('#anchor2'); var scrollToHere = slider.offsetTop; $('.button2').on('click', function() { bodyScrollBar.scrollTo(0, scrollToHere, 1000);}); I am a complete beginner so maybe the answer is really obvious 🧐 Cheers, Léo Link to comment Share on other sites More sharing options...
akapowl Posted December 18, 2021 Share Posted December 18, 2021 Welcome to the forums @leomaubert With the right logic it sure is possible. Just copy-pasting the const won't get you far for different reasons. These forums really try to stay focussed on GSAP specific questions and this is more of a general logic thing in combination with how a 3rd party smooth-scrolling library works, but here are some tips: You would have to get all the links you want to apply the scrollTo functionality to, loop over them and forEach add the eventListener and get the correct position to scroll to. Here is an example using vanilla JS. An extra tip: since pinned sections (like in the case below the center section) will be wrapped by the pin-spacer, getting their offsetTop will not work as it will report the offset to the top of the parent - in this case you will need to get the offsetTop of that pinSpacer - I added that here via a conditional check for a 'pinned' class, just to visualize the logic. See the Pen LYzyKQN by akapowl (@akapowl) on CodePen And since you are using jQuery, here is what that example above could look like with jQuery See the Pen ZEXKgzE by akapowl (@akapowl) on CodePen Hope that'll help a bit. Happy Scroling. 2 Link to comment Share on other sites More sharing options...
leomaubert Posted December 18, 2021 Share Posted December 18, 2021 You helped a lot! It's hard to understand everything but it is way better 🤝 Cheers, Léo 1 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