Home / Snippets / Typography /
Anchor link with scroll-margin
Jump to a section inside the scroll box: headings stay visible below the mini table of contents.
Scope
Audit covers EU warehouses only; APAC rollout is tracked separately in the program deck.
Risks
Carrier API latency spikes on Fridays; buffer SLA messaging in the status page.
Next steps
Ship the dry-run checklist to ops leads by Thursday noon local time.
Widely Supported
Quick implementation
section[id] {
scroll-margin-top: 1.25rem;
}
.prose {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
.prose { scroll-behavior: auto; }
}Prompt this to your LLM
Long policy pages with sticky nav.
You are fixing anchor jumps that hide headings under a sticky site header.
Goal: scroll-margin-top on section targets; smooth scrolling on the scroll container with reduced-motion fallback.
Constraints:
- Use rem units tied to header height (~4–5rem) on real pages; demo uses 1.25rem inside a small scroll box.
- No JavaScript scrollIntoView.
Return CSS.Why this matters in 2026
Sticky chrome is everywhere; native scroll-margin beats padding hacks on first heading lines.
The logic
The scroll container honors margin when aligning the target into view, offsetting by the margin amount.
Accessibility & performance
Disable smooth scrolling when users prefer reduced motion; keep focus management if you simulate SPA routing.