Reproduce the hidden heading
Open an article and activate a table-of-contents link. If the target heading aligns with the top of the viewport while a sticky header occupies the same area, the heading disappears behind it. This is easy to overlook during ordinary scrolling because the content may look correct until someone uses fragment navigation.
Choose the right offset location
Scroll-margin-top on a target can provide space when that target is scrolled into view. Scroll-padding-top on a scroll container expresses an inset for that container’s scrollport. Choose the approach that matches the layout and supported navigation behavior. Avoid combining several arbitrary offsets without checking their combined effect on the actual page.
Use a measured design value
If the header is 72 pixels tall, an offset slightly larger than that can give the heading useful breathing room. Store the header dimension in a custom property if multiple rules share it. Revisit the value when the header changes at a breakpoint. A desktop-only assumption can hide headings on a phone with a taller menu row.
Keep ids stable and unique
Generate fragment ids from meaningful headings, but account for duplicates and punctuation. Two sections both named Results need distinct identifiers. Links copied from a table of contents should continue to reach the same section after an unrelated design change. Avoid using array positions as public fragment ids if sections may be reordered later.
Do not require smooth scrolling
Smooth movement is optional; reaching the correct content is the essential behavior. Respect reduced-motion preferences and allow an immediate jump when appropriate. A custom click handler should not break opening a fragment in a new tab or copying its URL. Ordinary links already supply useful browser behavior that a decorative scrolling effect can accidentally remove.
Verify entry from outside the page
Test the table of contents, a copied URL containing the fragment, browser back navigation and keyboard activation. Confirm the heading is readable after the destination loads and after images above it finish loading. Then test the skip link separately. Both interactions need a sensible landing point, even if they use different target elements.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.