anchor links with SmoothScrollBar

[Mlbb lan]

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

[akapowl]

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

 

[Mlbb lan]

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!

[leomaubert]

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

[akapowl]

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.

[leomaubert]

You helped a lot!

It's hard to understand everything but it is way better 🤝

 

Cheers,

Léo