Using ScrollTo plugin with a smooth scrolling page

[invisibled]

Hi All,

I've ran into an issue I can't quite figure out and I'm throwing it out here to see if anybody has any insights.

I'm using ScrollTrigger to smooth scroll my entire page with this:
gsap.to(container.current, {
  y : () => -(getContainerHeight() - document.documentElement.clientHeight),
  scrollTrigger: {
    trigger: document.body,
    start: "top top",
    end: "bottom bottom",
    scrub: 1,
    invalidateOnRefresh: true
  }
})
 

What I'm trying to get working is anchor links to different content on my page using the ScrollTo plugin like this:
gsap.to( window, { duration : 1, scrollTo : `.page__index__${cls}`, ease : 'power2' } )

I've tried a handful of different options with the scrollTo plugin, but each one translates the page to somewhere around where I want it to go, but never the actual top of the element, where a regular anchor link would go. Does anybody have any experience with this or could provide any insight as to how I might get accurate anchor links? Please let me know if you need any more information!

[ZachSaucier]

Hey invisibled. What your smooth scrolling is doing is actually replacing the regular scrolling with your custom scrolling. So when you're trying to animate the actual scrolling with the scrollTo plugin, it doesn't work well. 

 

What you should do instead is use a dedicated smooth scrolling library. Then use whatever method the library you choose uses to animate the scroll position to the target value. The scrollerProxy docs gives you some library options and demos of how to get things working.

[akapowl]

Hey there.

 

Maybe this example by @ihatetomatoes can serve as inspiration for what you would have to consider, when trying to make it work.