fix(v2): restore previous scroll position on back button click #5081
Conversation
| @@ -19,6 +20,7 @@ function programmaticFocus(el: HTMLElement) { | |||
|
|
|||
| function SkipToContent(): JSX.Element { | |||
| const containerRef = useRef<HTMLDivElement>(null); | |||
| const {action} = useHistory(); | |||
There was a problem hiding this comment.
Perhaps action.history should be part of location object in useLocationChange hook?
There was a problem hiding this comment.
Not really needed until we have a 2nd use-case to access history.action so as you want. Will merge it in current state for now
|
✔️ [V2] 🔨 Explore the source changes: 57d9b20 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/60daf0971a16b20007f38bde 😎 Browse the preview: https://deploy-preview-5081--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5081--docusaurus-2.netlify.app/ |
|
Size Change: 0 B Total Size: 601 kB ℹ️ View Unchanged
|
|
I would like to have scroll position restored when navigating both ways (back and forward), because ... that is how webpages work. |
|
It also will work correctly if you move forward in history. You can check this behavior on the preview site, it should work. |
|
Yes, indeed, thank you so much for your work! |
|
Thanks @lex111 ! that seems to work fine |
Motivation
Quick attempt to fix #5076
Currently, after changing the location, we focus on the skip link to focus on that link at first. However, this has the side effect that when the user clicks on the browser's back button, then the previous scroll position is lost. To avoid this we can focus on the skip link only when moving forward in browser history.
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Scroll a bit on any doc page, then go to another page, then press on back button in the browser, as result is the previous scroll position should be preserved.
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)