Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

feat: persist sidebar scroll position across page navigations

Open
#74 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
72/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Quiet
Tech stack
javascript
Domain
frontend, web-dev

Research direction

Start by reading components/Sidebar/index.jsx, hooks/useScrollToElement.js, and hooks/useScroll.js to understand the existing ref and scroll handling. Verify that navigation preserves the sidebar position and that a hard refresh restores it from localStorage, covering the Node-API, Diagnostics, or Asynchronous Work sections.

Written by the indexing model from the issue text.

Description

Problem

The sidebar navigation currently resets to the top every time the user navigates between pages.
For readers working through content in sections deep in the sidebar (e.g. Node-API, Diagnostics,
or Asynchronous Work), this means manually scrolling back down after every page visit — which creates
a frustrating and disorienting experience.

Additionally, SideBar from @node-core/ui-components does not support forwardRef, so passing
ref={sidebarRef} to it is silently ignored. This means the scroll restoration logic in
useScrollToElement and useScroll never receives a valid DOM reference to attach the scroll listener to.

Proposed Solution

  1. Fix ref acquisition – Use useLayoutEffect in Sidebar/index.jsx to manually assign sidebarRef.current
    to the rendered <aside> element before useEffects run, ensuring the scroll listener is properly attached.

  2. Persist scroll position – Extend useScrollToElement to:

    • Save the sidebar scroll position to localStorage on every scroll event (debounced).
    • On mount, restore from NavigationStateContext (same-session navigation) or fall back to localStorage
      (full page refresh), whichever is available.

Files Changed

  • components/Sidebar/index.jsx – use useLayoutEffect to acquire ref to <aside>
  • hooks/useScrollToElement.js – add localStorage read on mount and write on scroll
  • hooks/useScroll.js – use onScrollRef pattern to avoid stale closure on onScroll callback

Expected Behaviour

Action Before After
Navigate to another page Sidebar resets to top Sidebar stays at last scroll position
Hard refresh (F5) Sidebar resets to top Sidebar restores from localStorage

Notes

  • SideBar from @node-core/ui-components needs to support forwardRef for this to work without
    the useLayoutEffect workaround. A separate issue/PR upstream on that package may be worth considering.
  • The useScroll hook dependency on ref.current (instead of ref) ensures the listener is attached
    after the DOM element is available.
Dominant language
JavaScript
Stars
29
Forks
165
Avg merge
1d 18h
Merged PRs (30d)
2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nodejs/learn

All issues in nodejs/learn

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.