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

[Cassie]

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]

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]

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]

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]

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]

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]

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]

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

[PapaDeBeau]

QUESTION: Based on this topic.

Hi, I love this idea. It's a "little" more advance than I would like. Is it possible to simplify and manually animate to an anchor?  For example not use Arrays etc and do "Something Like": 

// ON CLICK
gsap.to("#AnchorOne", {y:AnchorOne.position]);

I understand this is not the exact code. Just using and example. I don't mind if it's more manual, as long as I understand it. 

Thanks so much. 

[GreenSock]

Hi @PapaDeBeau. Are you talking about with ScrollSmoother in particular? Or a non-ScrollSmoother-controlled page? 

 

It'd definitely increase your chances of getting a solid answer quickly if you provide a super minimal demo showing just a basic idea of what you want to do (even if it's not functional). And are you trying to navigate to an anchor onclick or when the page loads? 

 

ScrollSmoother has a very easy way to animate to a particular element: 

https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

 

And if want to do that onload, @Cassie already had that in her demo. You could do: 

window.addEventListener("load", () => {
  let urlHash = window.location.href.split("#")[1],
      scrollElem = document.querySelector("#" + urlHash);
  if (scrollElem) {
    // if you've got a ScrollSmoother instance...
    smoother.scrollTo(scrollElem);
    // otherwise...
    gsap.to(window, { scrollTo: scrollElem }); // don't forget to load/register ScrollToPlugin
  }
});

Does that help?