Skip to content

feat: smooth scroll to id in module page #4451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TheMythologist wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: smooth scroll to id in module page #4451

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b7f9b0c
feat: smooth scroll to id in module page
TheMythologist Jul 8, 2026
c5f15d4
fix(modules): scope smooth scroll to page and respect reduced motion
TheMythologist Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion website/src/views/modules/ModulePageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { memo, useState } from 'react';
import { memo, useEffect, useState } from 'react';
import classnames from 'classnames';
import ScrollSpy from 'react-scrollspy';
import { kebabCase, map, mapValues, values, sortBy } from 'lodash-es';
Expand Down Expand Up @@ -69,6 +69,21 @@ const ModulePageContent: React.FC<Props> = ({ module, archiveYear }) => {

useScrollToTop();

// Smoothly scroll to section anchors from the side menu, but only while on
// this page. `scroll-behavior` must live on the scrolling root (`html`), so
// we scope it to the module page's lifecycle here instead of a global
// stylesheet rule that would leak to every other route. Respects
// `prefers-reduced-motion` for users who opt out of animations.
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return undefined;

const { style } = document.documentElement;
style.scrollBehavior = 'smooth';
return () => {
style.scrollBehavior = '';
};
}, []);
Comment on lines +78 to +85

@greptile-apps greptile-apps Bot Jul 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Reduced motion can persist This samples prefers-reduced-motion only when the module page mounts. If a user opens the page with reduced motion off, then enables reduced motion while staying on the same module page, html.style.scrollBehavior remains smooth until unmount. Later side-menu hash clicks can still animate even after the user has requested reduced motion.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: website/src/views/modules/ModulePageContent.tsx
Line: 78-85

Comment:
**Reduced motion can persist** This samples `prefers-reduced-motion` only when the module page mounts. If a user opens the page with reduced motion off, then enables reduced motion while staying on the same module page, `html.style.scrollBehavior` remains `smooth` until unmount. Later side-menu hash clicks can still animate even after the user has requested reduced motion.

How can I resolve this? If you propose a fix, please make it concise.


return (
<div className={classnames('page-container', styles.moduleInfoPage)}>
<Title description={module.description}>{pageTitle}</Title>
Expand Down