Jump to content
GreenSock

Cassie

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

Recommended Posts

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.

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

 @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. 🤷‍♂️

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