smooth scrolling doesnt work in App Router
Answered
Beveren posted this in #help-forum
BeverenOP
Hello, Im having issues with smooth scrolling in app router. I am not sure if I am missing something or its just not supported yet.
If I simply add smooth scroll onto html tag
Then <a> tags are smooth scrolling properly, but <Link> tag takes you right into the place ignoring smooth scroll.
Any ideas what did I miss or any easy workarounds(instead of making own Link component and rendering it based on current url)? I am using <a>tag for now, its fine until its all on single page, but I might run into trouble once I make more pages than one.
Thanks for any tips or ideas.
If I simply add smooth scroll onto html tag
<html lang="en" style={{ scrollBehavior: "smooth" }}>Then <a> tags are smooth scrolling properly, but <Link> tag takes you right into the place ignoring smooth scroll.
Any ideas what did I miss or any easy workarounds(instead of making own Link component and rendering it based on current url)? I am using <a>tag for now, its fine until its all on single page, but I might run into trouble once I make more pages than one.
Thanks for any tips or ideas.
5 Replies
Answer
dude @Beveren , i fixed it for me by just putting the important tag in the smooth scrolll property on html in global.css
American black bear
@Beveren Did you work around this? even !important in globals.css is not working for me.
html {
scroll-behavior: smooth !important;
}BeverenOP
it already works in latest next versions