Next.js Discord

Discord Forum

Smooth Scrolling not working with Link component

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Hoping to get some help with why smooth-scroll is not working for me. It is not working on either <a> or <Link>, so perhaps that is a clue. I've searched the other similar questions on this forum, but none of the solutions have made a difference for me. Thanks!

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

html {
  scroll-behavior: smooth !important;
  scroll-padding-top: var(--scroll-padding, 500px);
}

10 Replies

Muhammed Khal
Try to apply on body
@Muhammed Khal Try to apply on body
American black bearOP
That did not work. Is it possible there is some property overwriting scroll-smooth?
Muhammed Khal
!important
American black bearOP
Still no

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    scroll-behavior: smooth !important;
  }
}

html {
  scroll-behavior: smooth !important;
  scroll-padding-top: var(--scroll-padding, 500px);
}
American black bearOP
I also investigated if prefers-reduced-motion was a factor here, but I think I have my settings such that it would not cause this behavior.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
I also tried chrome://flags/#smooth-scrolling
Red imported fire ant
does scroll padding work for you?
@Red imported fire ant does scroll padding work for you?
American black bearOP
It does not (also broken)
Red imported fire ant
Hmm, also having the same problem…
Asian black bear
both not working for me, I've tried quite a few ways to do it - this guy here points to the issue being linked to how Link manages the scroll state. "it turns out that this issue has to do with how the NextJS <Link> component handles scrolling by default.", goes on to provide a fix but it doesn't work for me. "With the scroll prop set to false, the <Link> component will not handle the scrolling behavior" https://mariogiancini.com/implementing-smooth-scroll-behavior-with-tailwind-css-and-nextjs