Can't scroll to anchor from URL hash when using ScrollTrigger pinned elements and Smoothscroll

[Freehand Sam]

It's difficult to create a CodePen to demonstrate, since the issue is only when coming from another page. But it's the same issue as the OP on the reply I've linked. I have a site using ScrollSmoother as well as a few ScrollTrigger pinned elements (one that scrubs) at the top of the page. The sections I need to anchor to are below the pinned & scrubbing elements. I've implemented Blake's suggestion to the OP as well as a few others I've found. At best, it's somewhat erratic, landing in different places for the same anchor at different times. I'm thinking this is due to it trying to scroll before the page has fully built. I tried adding a delay to gsap.to(window, {scrollTo: anchor}), but it did not help. Any other ideas before I throw in the towel?

[GreenSock]

Yeah, it's definitely tough to offer help without a minimal demo, but I'll offer a few comments/suggestions: 

1. Your instinct sounds right to me - you've gotta make sure the entire page is fully loaded and ScrollTrigger has done its magic (adding padding for the pins, etc.) BEFORE you do any scrolling to the right spot. Perhaps listening for the window's "load" event(?)
2. Make sure you're using ScrollSmoother's scrollTo() method. Or use its offset() method and feed that value to a scrollTo tween. You must keep in mind that a regular old scrollTo tween [when you feed in an element] is just gonna figure out how far down from the top of the page that element is, but that doesn't factor in pinning which interferes with things. When you leverage ScrollSmoother's methods, those do all the extra calculations for you. 
3. If you're going to try using a delay, I'd make sure you start that delay after the page's "load" event. 

I hope that helps. If you still need some help, I'd certainly encourage you to create a minimal demo and we'd be glad to take a peek. 

 

Thanks for being a Club GreenSock member! 🥳

[Freehand Sam]

Thanks. This led me in the right direction. Scrolling to after window load, and/or with delays didn't work. But because you mentioned it, I took another look at the docs on SmoothScroll's scrollTo method. And noticed you could set an offset in pixels. So that made me think maybe I could grab the height of the pinned element on my page and offset by negative that. So it ended up looking like this:
smoother.scrollTo(elem, true, "top -" + offset)
**elem is the anchor ID from the URL hash and offset is the height of my pinned div**

This only works in my specific scenario where I know the page and the pinned element ID to account for. But it solves my problem. And I assume it could be made to work for any page with pinned elements if you used the same class every time and some conditional statements.   

[GreenSock]

Glad you got it working, @Freehand Sam! I'm still a bit confused about the behavior you described and it's tough to diagnose without a minimal demo, so if you ever wanna chase it down further, feel free to circle back here and post something. We'd be glad to take a peek.  

 

Merry Christmas!