vercel/next.js

Scrolling happens when user returns to a page with hash using browser back button

Open

#13653 opened on Jun 2, 2020

View on GitHub
 (12 comments) (7 reactions) (0 assignees)JavaScript (139,471 stars) (31,066 forks)batch import
good first issue

Description

Bug report

Describe the bug

When user returns to a page which have url with hash (e.g. http://localhost:3000/test#anchor) from another page, unexpected scrolling to the anchor element happen. It seems componentDidUpdate of Container triggers scrollToHash even when one returns by clicking browser back button. (https://github.com/vercel/next.js/blob/v9.4.4/packages/next/client/index.js#L135-L137)

To Reproduce

Example repo: https://github.com/monae/nextjs-scrolltohash-bug

  1. git clone git@github.com:monae/nextjs-scrolltohash-bug.git and npm run dev.
  2. Click on 'Open the test page without hash'. You are on top of the page.
  3. Scroll down and click on 'Open another page'.
  4. Click on browser back button, then you return to the preserved scroll position (Chrome, Safari) or top of the page (Firefox).
  5. Back to the first page and click on 'Open the test page with hash'. You are on the anchor element.
  6. Scroll down and click on 'Open another page'.
  7. Click on browser back button, then you return to the anchor element.

Expected behavior

The results of 4. & 7. should be same (although the behavior of Firefox is not desirable).

Screenshots

System information

  • OS: macOS
  • Browser (if applies) Chrome, Safari, Firefox
  • Version of Next.js: 9.4.4
  • Version of Node.js: 14.3.0

Additional context

Contributor guide

Tech stack
nextjsreactjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Next.js basicsReact lifecyclebrowser history API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the scrollToHash function in packages/next/client/index.js around lines 135-137. The issue is that componentDidUpdate triggers scrollToHash on back navigation. Consider checking whether the navigation is a popstate event and only scroll if not. Also review the browser's scroll restoration behavior and the Next.js Router's history handling.