Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GeS

anchor links with SmoothScrollBar

Recommended Posts

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

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

 

  • Like 3
Link to comment
Share on other sites

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!

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

×