Scrolltrigger and scrollsmoother issue with anchor tag.

[Dzhuleikhan]

Hello guys,

A have an issue on my website. I will try to explain that issue.

I have an anchor tag in 'footer' section, and it downloads a file, do when i go to page, scroll down to footer section and click on that anchor tag, file dowloads, and jumps to top and scroll down to footer again itself.

Can you please help me to fix that problem, please?
I WANT A SCREOLL STAY AT THE SAME POSITION WHERE I CLICKED THE LINK.
Thanks

 

PS: i include a screenshot of that link for you to know about which link i am talking about

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Dzhuleikhan]

4 minutes ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Well, i could make a demo, but it doesn show the issue.
The main thing is, when i remove a scrollsmoother plugin from my website, everything works fine, nothing jump, and when i click the link, scroll stays at the same position of the page, but as soon as i turn on scrollsmoother, i face this issue.

May be you can figure our what is going on just by clicking that link in the footer section. You will see that scroll goes to beginning of the page, and turns back to footer

[Cassie]

We can't really help you to debug without seeing the code, and I'm afraid we don't have the time or resources to debug a live site.

 

Quote

Well, i could make a demo, but it doesn show the issue.

Have you attempted to make a demo showing the issue? Are you saying it was impossible to replicate? 

If so then there's something happening on your site that's different from the demo, maybe another library or a CSS class or some additional JS

 

[Dzhuleikhan]

58 minutes ago, Cassie said:

We can't really help you to debug without seeing the code, and I'm afraid we don't have the time or resources to debug a live site.

 

Have you attempted to make a demo showing the issue? Are you saying it was impossible to replicate? 

If so then there's something happening on your site that's different from the demo, maybe another library or a CSS class or some additional JS

 

Thanks for reply,

it looks like i found what causes tthe issue.

I use drawsvg plugin which draws a line in "hero" section when i scroll down, so i comment the srawsvg code, and everything works fine,

I add will change: transform; but it doesnt help.

[Dzhuleikhan]

1 hour ago, Cassie said:

We can't really help you to debug without seeing the code, and I'm afraid we don't have the time or resources to debug a live site.

 

Have you attempted to make a demo showing the issue? Are you saying it was impossible to replicate? 

If so then there's something happening on your site that's different from the demo, maybe another library or a CSS class or some additional JS

 

I found real couse of this problem. 

Its pinning. the line that draws in my hero section is pinned to this section, thats why it jumps when i click on the link,

I tried to remove pinning and set some delay on the animation and it solved the problem, I dont know what is the reason.

But i need that animation to be pinned to that section. What can i do?

[Rodrigo]

Hi,

 

Without a minimal demo there is not a lot we can do. Debugging the live site link you provide is impossible since the code is minified and we can tinker with it.

 

Is worth mentioning that I can't replicate this problem in Firefox and Chrome on Ubuntu 20 & 22.

 

The only advice I can offer is to prevent the default behaviour on the link and programmatically download the file:

https://blog.logrocket.com/programmatic-file-downloads-in-the-browser-9a5186298d5c/

 

Hopefully this helps.

Happy Tweening!