Jump to content
Search Community

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

Cassie test
Moderator Tag

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

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

  • 1 year later...

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. 

Link to comment
Share on other sites

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? 

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.
×
×
  • Create New...