<Link> not scrolling top sticky header

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/header-no-scroll-nextjs-x84kd3?embed=1&file=%2Fapp%2Flayout.tsx

To Reproduce

1. Start the application in development (next dev)

Current vs. Expected behavior

A sticky header is present at the top of the layout (it has an opacity of 0.8 for viewing the page below).
If the scroll height is lower than the header height and I click on the link to another page, the scroll doesn't return to the top of the page.

On the other hand, if the scroll height is greater than the header height, then the scroll does return to the top of the page as expected.

https://github.com/vercel/next.js/assets/25907732/5b86dd8d-12e3-4d3c-9065-91b037b7dd5d

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:27 PDT 2023; root:xnu-10002.41.9~6/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 20.9.0
  npm: 10.2.5
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.0 // There is a newer version (14.2.1) available, upgrade recommended! 
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response

_NEXT-3099

Start with the linked CodeSandbox reproduction and inspect app/layout.tsx. Run the app with next dev, then compare navigation when the page is shorter than the sticky header with navigation on a taller page. Done means links return the viewport to the top in both cases.