Repository: next.js
Issue: Link does not scroll to anchor if it is within Suspense boundary
Labels: bug,Navigation,Partial Prerendering (PPR)

### Link to the code that reproduces this issue

https://github.com/kachkaev/next-link-scroll-with-suspense-mwe

### To Reproduce

https://github.com/vercel/next.js/assets/608862/464a3373-1f35-4566-8da5-e0c2f6da0086

<ol dir="auto">
<li>Open <a href="http://localhost:3000/" rel="nofollow">http://localhost:3000/</a></li>
<li>Click on <code class="notranslate">/products#category-42</code></li>
<li>Observe <code class="notranslate">&lt;h2 id="category-42"&gt;</code> within the viewport (as expected)</li>
<li>Go back to <code class="notranslate">/</code></li>
<li>Click on <code class="notranslate">/products-with-suspense#category-42</code> (same page, but categories load inside Suspense boundary with a 100ms delay)</li>
<li>Observe the top of the page, unlike previously (unexpected)</li>
</ol>

<p dir="auto">Interestingly, navigating to  <code class="notranslate">/products-with-suspense#category-42</code> for the second time works correctly (i.e. it scrolls like <code class="notranslate">/products#category-42</code>). This is because of caching. When browser-side cache for <code class="notranslate">/products-with-suspense</code> expires, scrolling to anchor is skipped again.</p>

### Current vs. Expected behavior

<p dir="auto">I’d expect <code class="notranslate">/products#category-42</code> and <code class="notranslate">/products-with-suspense#category-42</code> to work the same way. If <code class="notranslate">&lt;h2 id="category-42"&gt;</code> shows while Suspense ‘islands’ get ‘resolved’, a user should be scrolled to the hash.</p> 

Perhaps, scrolling should be smooth in this case (otherwise, there will be a ‘flash’ of the top of the page and the transition to the anchor will be confusing). Alternatively, `<Link>` / `router.push` would not replace the old page until the `#category-42` has appeared in the DOM or until all Suspense boundaries have been resolved. Either way, not observing any scrolling seems like a bug.

<p dir="auto">This bug can emerge as a regression after refactoring. Imagine we have a product catalog that has been working for years and we’ve added <code class="notranslate">&lt;Suspense&gt;</code> around the list of products to show page skeleton ASAP. Users will no longer be able to navigate to a specific category and this may remain unnoticed by devs without e2e tests.</p>

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.11.1
  npm: 10.5.0
  Yarn: 4.0.0
  pnpm: 8.10.5
Relevant Packages:
  next: 14.3.0-canary.70 // Latest available version is detected (14.3.0-canary.70).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Navigation, Partial Prerendering (PPR)

### Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

### Additional context

_No response_