Anchor link with scroll-margin

Anchor link with scroll-margin snippet with a live demo, copyable CSS, and implementation prompt.

Drop-in CSS pattern for typography use cases.

Widely Supported

typographyno-js

Quick implementation

.anchor-link-demo { width: min(42rem, 100%); margin-inline: auto; }
.anchor-link-card { border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--card); padding: 1rem; }

Prompt this to your LLM

Includes role, constraints, framework variants, and edge cases.

You are a senior frontend engineer.

Goal: Build the "Anchor link with scroll-margin" CSS pattern.

Constraints:
- Keep markup minimal and accessible.
- Use CSS custom properties and oklch() where explicit colors are needed.
- Include a reduced-motion fallback for animated behavior.
- Make it responsive without JavaScript.

Return HTML + CSS.

Why this matters in 2026

Anchor link with scroll-margin is a practical pattern that appears across modern interfaces. Packaging it as a reusable snippet speeds up delivery and keeps styling consistent.

The logic

This pattern relies on stable layout primitives, tokenized spacing, and a predictable component shell. The same structure scales from docs demos to production components.

Accessibility & performance

Use semantic HTML for interactive controls and keep color contrast strong. The snippet is lightweight and avoids unnecessary JavaScript for core presentation.