Page Scroll Implementation

[BrittanyIRL]

Page Scroll Implementation

Notion Page

Requirements

1. When clicking a linked heading in the docs page, it should auto-scroll that heading to the top of the page but NOT hidden behind the header
2. Refreshing the page should auto-scroll to the appropriate spot if there is a hash in the url
3. The sidebar nav should behave similarly (see existing site)

Description

• update lodash package
• add react-scroll for animated scrolling: https://github.com/fisshy/react-scroll
• z-index update for header so that sidebar is positioned where it should be.
• Split out some constants used for scrolling. Ie) calculating true offset/position, default classes to look for, possible routes
• ScrollToCurrentSection replaces the old ScrollToTop component as it is more semantic. Using some hooks to decide when to look for the proper spot to scroll to. useEffect watches for the pathname update - pathname only updates on page initial load, it has nothing to do with the hash changes in the page. Then useLayoutEffect is watching for hash updates as well as page container height updates (initially) since the playground elements aren't sized until after first paint which makes the initial scrollTo unreliable.

Demo

On Refresh or specific hyperlink w/ hash

In docs scroll

[boygirl]

The scroll that happens when the sidebar is clicked is lovely, but I'm finding the scroll on load / refresh to be jarring.

[BrittanyIRL]

The scroll that happens when the sidebar is clicked is lovely, but I'm finding the scroll on load / refresh to be jarring.

What about this? I shortened the animation time. I think it works well?