Skip to content

fix(sidebar): scroll active item into view on page load - #191

Open
ubay1 wants to merge 3 commits into
nodejs:mainfrom
ubay1:fix/sidebar-scroll-to-active-item
Open

ubay1 wants to merge 3 commits into
nodejs:mainfrom
ubay1:fix/sidebar-scroll-to-active-item

Conversation

@ubay1

@ubay1 ubay1 commented Nov 12, 2026 •

Copy link
Copy Markdown

Every navigation on https://nodejs.org/learn
is a full page load, so the sidebar always resets to the top. When you click an item near the bottom of the sidebar (e.g. Diagnostics or TypeScript), the page you just opened is no longer visible in the navigation, and you have to scroll back down to find where you are.

This PR scrolls the sidebar so the active item is centered when the page loads.

Earlier ideas were discussed and turned down:

  • Persisting the scroll position in localStorage
  • Converting the site to SPA-style navigation (the change was too large)

This approach needs no storage and no navigation changes. The active item is derived from the current pathname, which the sidebar already knows. The whole change is limited to components/Sidebar/index.jsx.

Changes

components/Sidebar/index.jsx: adds a useLayoutEffect that:

  • finds the active link (aside a[href=""]) and its
  • does nothing if the active link is already fully visible
  • otherwise adjusts only the sidebar's scrollTop so the active link is centered (it does not use scrollIntoView(), which can also scroll the main page)

Validation

  • npm run build
  • npx serve out
  • Click an item near the bottom of the sidebar. After the page loads, the clicked item should be visible (centered) in the sidebar instead of the sidebar being reset to the top.
  • Click an item near the top. The sidebar should not move.

@ubay1
ubay1 requested a review from a team as a code owner November 12, 2026 13:41
@vercel

vercel Bot commented Nov 12, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
nodejs-learn Ready Ready Preview Nov 12, 2026 2:34pm UTC

Request Review

@github-actions

Copy link
Copy Markdown

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

@ubay1 ubay1 changed the title ix(sidebar): scroll active item into view on page load fix(sidebar): scroll active item into view on page load Nov 12, 2026
@ubay1
ubay1 force-pushed the fix/sidebar-scroll-to-active-item branch from cf5514a to 87d5232 Compare November 12, 2026 13:57
…pper

doc-kit targets `is-land[data-island-name='SideBar']` while this repo
registers the island as `Sidebar`, leaving it with `display: contents`
and breaking sticky/overflow scrolling on the sidebar.

This branch was successfully deployed

1 active deployment
Preview — da5971ac Deployed Nov 12, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant