App Router: Link component is not respecting scroll-behavior: smooth when only hash changes.

[coreyleelarson]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: 8.6.11
    Relevant Packages:
      next: 13.4.18-canary.0
      eslint-config-next: 13.4.18-canary.0
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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

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

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

https://github.com/coreyleelarson/scroll-behavior-smooth

To Reproduce

Toggle between the different nav links to observe the difference in behavior between the anchors and Link components.

Describe the Bug

Link component is not respecting scroll-behavior: smooth when only hash changes. If I append !important it works, but that should not be required.

There was a previous bug report for this (#51721) but the linked fix does not appear to resolve the issue in the latest version.

Expected Behavior

Link component should scroll smoothly to the target anchor when scroll-behavior: smooth is set without !important.

Which browser are you using? (if relevant)

Chrome 116.0.5845.96

How are you deploying your application? (if relevant)

No response

[coreyleelarson]

I did a little digging into this, and it seems the issue might be that focusAndScrollRef.onlyHashChange = false is being set before calling handleSmoothScroll is called in packages/next/src/client/components/layout-router.tsx.

if (options.onlyHashChange) is therefore always false in handleSmoothScroll sets htmlElement.style.scrollBehavior = 'auto' before scrollIntoView() is called.

If I move focusAndScrollRef.onlyHashChange = false to after the handleSmoothScroll invocation, it fixes the issue. I'd be willing to PR it, but I don't know enough about the code to know if this would cause any other issues.

[github-actions]

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