App Router: Next/Link does not respect smooth scroll

[chrisgms]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

codesandbox on [email protected]

Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/boring-carson-rhrf23?file=%2Fapp%2Flayout.tsx%3A9%2C1

To Reproduce

Use the two different navbars to see smooth scroll difference between Next/Link and normal anchor tag.

Describe the Bug

Next/Link does not scroll smoothly

Expected Behavior

Next/Link should scroll smoothly

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1406

[azvyae]

Possible related to #44295, only current workaround is by define the style inside global.css file with using !important directive

html {
 scroll-behavior: smooth !important;
}

[agrattan0820]

Having the same issue as well, got a test deployment up in case that helps:
Vercel deployment: https://nextjs-scroll-to.vercel.app/
Code: https://github.com/agrattan0820/nextjs-scroll-to

[Manduro]

Possible related to #44295, only current workaround is by define the style inside global.css file with using !important directive

html {
 scroll-behavior: smooth !important;
}

Note that this has a possible unwanted side effect: navigating to a different page will not set the scroll position instantly but will also scroll to top smoothly.

[timneutkens]

To clarify this further, you're expecting <Link href="#somewhere-on-the-same-page"> to be a smooth scroll and <Link href="/blog#somewhere-else"> to not do a smooth scroll right?

As @Manduro said we saw many cases where people added scroll-behavior: smooth and then navigations become a case of rendering the page, then smooth scrolling to the top, which is a very jarring UX. Hence why we override the smooth scrolling before navigating. However, I'm thinking of not overriding scroll-behavior when it's same-page applying a hash.

[chrisgms]

Perhaps a new prop to override the smooth behavior on a per case basis would be ideal to get a wider range of possibility.

<Link href="#somewhere-on-the-same-page"> would move instantly
<Link href="#somewhere-on-the-same-page" smooth> would scroll smoothly if scroll behavior smooth is set in css

and same for different pages:

<Link href="/blog#somewhere-else"> goes to top of page
<Link href="/blog#somewhere-else" smooth> scrolls to section

The last one may be weird depending if you go to the top first or not.

[timneutkens]

I'd prefer not introducing different behavior / props, just mirroring what <a> does.

[chrisgms]

It would be great if different page hash link could also scroll smoothly, but if this would prove problematic with non-hash links scrolling to top then at least same-page hash smooth scroll as per your original suggestion would be fine. Worst case it should still be possible to achieve different page smooth scroll using normal <a> tags.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.