fix: restore anchor scrolling on initial page load (CLO-805)#530
fix: restore anchor scrolling on initial page load (CLO-805)#530
Conversation
Docusaurus skips hash-based scrolling on initial page load because previousLocation is null. It relies on the browser to handle it natively, but React hydration resets the scroll position before the browser finishes its native anchor scroll. Add a clientModule that explicitly scrolls to the hash target after hydration settles, filling the gap left by the core router. Closes CLO-805
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewed the anchor scrolling fix. One minor defensive-coding issue found:
Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
| const id = decodeURIComponent(hash.substring(1)); | ||
| if (!id) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
decodeURIComponent throws a URIError when the hash contains a malformed percent-encoded sequence (e.g. #%ZZ). If someone shares or bookmarks such a URL, the unhandled exception would crash this callback and could prevent other client module hooks from running. Wrapping it in a try-catch keeps things defensive.
| const id = decodeURIComponent(hash.substring(1)); | |
| if (!id) { | |
| return; | |
| } | |
| let id: string; | |
| try { | |
| id = decodeURIComponent(hash.substring(1)); | |
| } catch { | |
| return; | |
| } | |
| if (!id) { | |
| return; | |
| } |
Fix it with Roo Code or mention @roomote and request a fix.
Reviewed the anchor scrolling fix. Implementation correctly uses the
Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
Fixes deep-linking to doc sub-sections (anchor links like
#commands).Problem
Docusaurus's built-in scroll handler skips hash-based scrolling on initial page load because
previousLocationisnull. It assumes the browser handles native hash scrolling, but React hydration resets the scroll position before the browser finishes its native anchor scroll. This means URLs likedocs.roocode.com/roo-code-cloud/environments#commandsland at the top of the page instead of the targeted section.Solution
Added a Docusaurus
clientModule(src/clientModules/scrollToAnchor.ts) that explicitly scrolls to the hash target after hydration settles:previousLocationisnull) so it does not duplicate the core router's behavior for subsequent navigationsrequestAnimationFrameto wait for the DOM to settle after hydrationscrollIntoView()which respects thescroll-margin-topalready set by Docusaurus'sanchorTargetStickyNavbarclassChanges
src/clientModules/scrollToAnchor.ts-- new client moduledocusaurus.config.ts-- registers the client module viaclientModulesVerification
pnpm buildpassespnpm run check-typespassespnpm run lintpassesView task on Roo Code Cloud
Important
Fixes initial page load hash-based scrolling in Docusaurus by adding a client module to handle scrolling after React hydration.
scrollToAnchorModuleinsrc/clientModules/scrollToAnchor.ts.requestAnimationFrameand a 150ms retry to ensure scrolling after React hydration.previousLocationisnullto avoid interfering with subsequent navigations.scrollToAnchorModuleindocusaurus.config.tsunderclientModules.This description was created by
for 6725136. You can customize this summary. It will automatically update as commits are pushed.