nextjs - ✅(Solved) Fix Link doesn't scroll to section anchor (by id) again [3 pull requests, 7 comments, 5 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#88986Fetched 2026-04-08 02:03:36
View on GitHub
Comments
7
Participants
5
Timeline
27
Reactions
13
Timeline (top)
subscribed ×8commented ×7referenced ×4mentioned ×3

Fix Action

Fixed

PR fix notes

PR #89051: url is considered as new if only a hash was changed from previous url

Description (problem / solution / changelog)

<!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: -->

For Contributors

Fixing a bug

  • Related issues linked using fixes #88986
  • Tests added: test/e2e/app-dir/hash-navigation
  • Errors have a helpful link attached

For Maintainers

What?

Fixes hash navigation when using next/link so that clicking a link to the same hash (e.g. #section) triggers scrolling again.

Previously, if the current URL already contained the same hash, Next.js treated it as a no-op and did not scroll.


Why?

This breaks expected browser behavior and real user flows:

  • Users scroll away from a section
  • Click the same in-page link again
  • Nothing happens

Native anchors scroll again, but Next’s router skipped navigation due to the onlyAHashChange logic.

This affects common patterns such as:

  • Table of contents links
  • In-page navigation menus
  • Documentation pages

How?

The router logic was updated so that same-hash navigations are no longer ignored.

Instead of treating identical hash changes as a no-op, the router now explicitly allows the navigation, ensuring scroll behavior is applied again.


Closes NEXT- Fixes #88986

Changed files

  • packages/next/src/shared/lib/router/router.ts (modified, +1/-0)
  • test/e2e/app-dir/hash-navigation/app/page.tsx (added, +15/-0)
  • test/e2e/app-dir/hash-navigation/hash-navigation.test.ts (added, +28/-0)

PR #89459: fix: link doesn't scroll to section anchor again

Description (problem / solution / changelog)

Description

Add a regression test for an issue where clicking a link with a hash fragment would not scroll to the target element if clicked multiple times.

This has been broken several times and was recently fixed by https://github.com/vercel/next.js/pull/88046 which was a refactoring effort. So to prevent regressions, we need a test.

The test excersizes the case where a user clicks a link with a hash (e.g., <Link href="#section" />) and then scrolls manually away from the target, then clicks the the same link again. We ensure that the page is scrolled again

Testing

  • Existing test: test/e2e/app-dir/navigation/navigation.test.ts (hash-link-back-to-same-page)

Related

Fixes #88986

Changed files

  • test/e2e/app-dir/navigation/navigation.test.ts (modified, +39/-0)

Code Example

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): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.21.1
  npm: 10.9.4
  Yarn: 1.22.22
  pnpm: 9.15.3
Relevant Packages:
  next: 16.1.4 // Latest available version is detected (16.1.4).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

repo: https://github.com/evgeniyworkbel/my-nextjs16-link-issue deploy: my-nextjs16-link-issue.vercel.app

To Reproduce

  1. Click link in footer to scroll to section
  2. See that page has scrolled to section
  3. Scroll manually by mouse to footer again
  4. Click link in footer again

Current vs. Expected behavior

Expected result: page will be scrolled to section Actual result: nothing happened

Provide environment information

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): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.21.1
  npm: 10.9.4
  Yarn: 1.22.22
  pnpm: 9.15.3
Relevant Packages:
  next: 16.1.4 // Latest available version is detected (16.1.4).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Linking and Navigating

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

next dev (local), Vercel (Deployed)

Additional context

No response

extent analysis

TL;DR

The issue can likely be resolved by adjusting the link handling in the Next.js application to properly handle scrolling to sections after manual scrolling.

Guidance

  • Verify that the link in the footer is correctly set up to scroll to the section using an anchor link (#section-id) and that the section has a corresponding id attribute.
  • Check the browser console for any errors that may be occurring when clicking the link the second time, which could indicate a JavaScript issue preventing the scroll.
  • Inspect the HTML structure of the page to ensure that the section is not being dynamically modified or removed after the initial scroll, which could cause the link to fail on subsequent clicks.
  • Consider adding a debug log or alert to verify that the click event is being triggered and handled as expected when clicking the link the second time.

Example

No specific code example can be provided without more details on the implementation, but ensuring the link and section are correctly set up, such as <a href="#section-id">Link</a> and <div id="section-id">Section Content</div>, is crucial.

Notes

The issue seems to be related to how Next.js handles client-side routing and scrolling. The fact that it works on the first click but not after manual scrolling suggests a potential issue with the application's state or event handling.

Recommendation

Apply a workaround by adjusting the link handling to ensure it correctly scrolls to the section after manual scrolling, potentially by using a custom click handler that manually scrolls to the section using window.scrollTo or a similar method.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING