scrolltoplugin ScrollToPlugin in Chrome and Edge

[Neg 8 Likes (Newbie)]

Hello, 

 

While I was testing this example in my own website with different browser, I noticed that it scrolls very smooth in Firefox (like the example in the codepen) but in Edge and Chrome no matter what ease I choose or how long the duration is, scroll is not smooth, I see that  #Section suddenly jump under navigation bar and this is very annoying. Do you know how can I solve this?

 

Thanks

 

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

[Cassie 5,132 Likes (Superhero)]

Hello @Neg - Are you sure it's working?

It sounds likely that you're not preventing default and using anchor links? Maybe you have smooth scrolling enabled in firefox globally or a smooth scroll extension? 

If you're *sure* it's working could you post a minimal demo showing the issue, it's quite hard to debug blind.

Thanks!

[Neg 8 Likes (Newbie)]

Hi @Cassie,

 

I am trying it on my local host and don't know how I can make a demo of it. I just copied the same css, html and js code from above link and I see the differences in different browser. Do you know why? 

 

[Neg 8 Likes (Newbie)]

18 minutes ago, Cassie said:

Are you sure it's working?

I don't understand what you mean? 

[Cassie 5,132 Likes (Superhero)]

*are you sure the scrollTo plugin is actually loaded and animating.

It sounds like what you're seeing is the default browser behaviour for anchor links. Pen linked below - If not and it is animating inconsistently please provide a demo as this example is working perfectly in both chrome and firefox.

 

We can't debug a working demo I'm afraid. We need to be able to see what you're doing differently.

See the Pen 8b2f8a0d35a2f8d61c1a6e6040c789a6?editors=1010 by cassie-codes (@cassie-codes) on CodePen

[Neg 8 Likes (Newbie)]

 I don't know how to use codepen for WordPress.

 

For ScrollToPlugin I used CDN. 

[OSUblake 18,475 Likes (Superhero)]

Try getting rid of this in your CSS.

:root {
    scroll-behavior: smooth;
}

 

[Neg 8 Likes (Newbie)]

6 minutes ago, OSUblake said:

:root { scroll-behavior: smooth; }

I cannot find it in my CSS! 

[Neg 8 Likes (Newbie)]

Thanks a lot! This fixed the issue.

 

:root {

  scroll-behavior: inherit;

}