ScrollSmoother - how to navigate to anchor links from an external page.

[Cassie 4,833 Likes (Superhero)]

Just bumping this here in case it's useful for anyone else.

Navigate to this url to see it working.

https://cdpn.io/pen/debug/XWVvMGr#section3

See the Pen XWVvMGr by GreenSock (@GreenSock) on CodePen

[Harold AO 6 Likes (Newbie)]

1 hour ago, Cassie said:

Just bumping this here in case it's useful for anyone else.

Navigate to this url to see it working.

https://cdpn.io/pen/debug/XWVvMGr#section3

thanks. It's will be helpful 

 

[thousandlines 3 Likes (Newbie)]

Thanks for this Cassie, really helpful. When using the demo you've made here and also in a similar implementation on a site i'm developing sometimes clicking on the links fails and it bounces back to the top. Is this something you see when you're clicking on the links? Or it sometimes travels to the wrong place.

[GreenSock 17,869 Likes (Superhero)]

It works perfectly every time for me. Zero glitches ever. Lots of clicks. What browser and OS are you seeing problems on? Any secrets to reproducing it? 

[thousandlines 3 Likes (Newbie)]

Sure thing, i'm using Chrome 100.0.4896.127 on MacOS Monterary 12.3.1 (21E258). It's very hit and miss and for the majority of the time it works great! No secrets to reproduce it really apart from clicking a bunch of times. Sometimes i've found that clicking on a link before the scroll back to top has completed then that can trigger the jump to fail and the animation of scrolling back to top to complete, when that happens follow up clicks on the same link then repeatedly cause a quick jump down of about 50px before going back to the top.

 

I was also getting the problem in Safari Version 15.4 (17613.1.17.1.13) and I also tried a private tab in Firefox Developer Edition 99.0b3 both of which I was able to reproduce the problem but within 5-10 clicks. I think Chrome took 20-30 but that feels a bit anecdotal!

 

https://streamable.com/t9arrg
If you can check out the video i've linked then you should be able to see it in action. In the video you can sometimes see the whole page scroll up, that's just my mouse getting a little over excited and not related to what i'm seeing. The relevant time codes for you are at:

- 0:22 where the scroll fails for the first time

- 1:06-1:09 (it's a little hard to see here because the whole page scrolled up but you you can see two things happen: 1 - scroll fail, 2 - scroll success but to wrong location as the section is partly offset

- 1:30 and 1:45 this time in full screen codepen - repeated scroll failure 

I'm really sorry if this is something isolated and unique my end, happy to provide any more information that might be helpful

[Harold AO 6 Likes (Newbie)]

5 hours ago, thousandlines said:

Sure thing, i'm using Chrome 100.0.4896.127 on MacOS Monterary 12.3.1 (21E258). It's very hit and miss and for the majority of the time it works great! No secrets to reproduce it really apart from clicking a bunch of times. Sometimes i've found that clicking on a link before the scroll back to top has completed then that can trigger the jump to fail and the animation of scrolling back to top to complete, when that happens follow up clicks on the same link then repeatedly cause a quick jump down of about 50px before going back to the top.

 

I was also getting the problem in Safari Version 15.4 (17613.1.17.1.13) and I also tried a private tab in Firefox Developer Edition 99.0b3 both of which I was able to reproduce the problem but within 5-10 clicks. I think Chrome took 20-30 but that feels a bit anecdotal!

 

https://streamable.com/t9arrg
If you can check out the video i've linked then you should be able to see it in action. In the video you can sometimes see the whole page scroll up, that's just my mouse getting a little over excited and not related to what i'm seeing. The relevant time codes for you are at:

- 0:22 where the scroll fails for the first time

- 1:06-1:09 (it's a little hard to see here because the whole page scrolled up but you you can see two things happen: 1 - scroll fail, 2 - scroll success but to wrong location as the section is partly offset

- 1:30 and 1:45 this time in full screen codepen - repeated scroll failure 

I'm really sorry if this is something isolated and unique my end, happy to provide any more information that might be helpful

I think it's because it's an iframe...

[OSUblake 18,453 Likes (Superhero)]

Were you only testing on CodePen, or is this something you were running into locally?

 

I couldn't reproduce the issue using the debug URL which doesn't run in an iframe.

 

https://cdpn.io/pen/debug/XWVvMGr#section3

 

[GreenSock 17,869 Likes (Superhero)]

 @thousandlines can you please verify that you're using version 3.10.4 of both ScrollTrigger and ScrollSmoother? You could console.log(ScrollTrigger.version, ScrollSmoother.version)

 

I'm using the same setup as you are and cannot reproduce any problems like you described. 🤷‍♂️