How to Use Anchors to Jump to Sections Smoothly
Well-placed anchors help visitors move through a long page without endless scrolling. A link can take someone directly to a heading, pricing detail, FAQ answer, contact form, or another useful part of the same document. When the movement feels predictable, the page becomes easier to scan and more comfortable to use.
Anchor links are especially useful on information-rich websites with clear navigation and readable layouts. They can support visitors browsing on a phone in Sydney, checking a service page during a Melbourne commute, or reading a detailed guide on a slower connection in a regional Queensland town.
The basic technique uses an HTML id on the destination and a matching hash link. A polished result requires a little more care: headings should be meaningful, keyboard focus should remain visible, sticky navigation should not cover the destination, and smooth scrolling should never interfere with people who prefer reduced motion.
Build The Basic HTML Link
An anchor link points to an element with a unique id. The link begins with #, followed by the exact ID value. Keep IDs short, descriptive, and free from spaces so the URL remains readable and dependable.
<a href="#features">Jump to features</a>
<section id="features">
<h2>Features</h2>
<p>Explore the main details of this page.</p>
</section>
IDs must be unique within the page. If two sections use id="details", the browser may jump to the wrong location. Use lowercase words separated by hyphens, such as #how-it-works or #contact-information, and ensure the link text explains where it leads.
Make The Movement Feel Natural
Browsers usually jump instantly to a matching anchor. CSS can create a gentler transition with scroll-behaviour: smooth, making the change easier to follow on long pages. The Australian Government Design System and other accessibility-focused design practices favour clear movement that supports orientation without becoming distracting.
html {
scroll-behaviour: smooth;
}
Smooth movement should be treated as a visual enhancement rather than a requirement. Some visitors experience motion sensitivity, and some devices or browsers may handle animated scrolling differently. Respect the operating system preference with a reduced-motion rule.
@media (prefers-reduced-motion: reduce) {
html {
scroll-behaviour: auto;
}
}
Prevent Sticky Headers From Blocking Content
A fixed or sticky header can hide the heading after an anchor jump. This is common on mobile layouts, where the navigation bar occupies a larger share of the screen. The scroll-margin-top property creates breathing room above the target.
section[id],
h2[id],
h3[id] {
scroll-margin-top: 5rem;
}
Set the value to match the real height of the header, including extra padding on smaller screens. Test the page at common Australian viewport sizes, including a narrow phone display and a wider laptop used at home or in an office. If the header changes height at a breakpoint, use responsive CSS values.
Good target choices include headings or the beginning of a complete content block. Avoid placing an ID on a small icon, an image, or a line that leaves the visitor unsure where they have landed.
Choose Anchors That Improve Navigation
A page can include a compact contents list near the top, links within explanatory text, and a return link near the end of a long section. Each link should serve a clear purpose rather than duplicate every nearby heading.
- Use descriptive link text such as “Read accessibility guidance”.
- Give every destination a unique, stable ID.
- Keep important targets near the start of their content.
- Use headings that describe the section accurately.
- Check that anchor links remain useful on touchscreens.
Avoid vague labels such as “click here” because they provide little context for screen-reader users scanning a list of links. A phrase like “View payment and delivery details” communicates the destination before the visitor activates it.
Anchor URLs can be copied and shared, which is useful for support teams, community organisations, and businesses serving customers across Australia. A link ending in #delivery lets someone open the page at the relevant section rather than repeat a long explanation.
Compare Common Anchor Approaches
Different techniques suit different page structures. A standard fragment link is usually the best starting point, while JavaScript is reserved for cases involving custom panels, tracking, or complex application behaviour.
| Approach | Suitable use | Main benefit | Watch point |
|---|---|---|---|
| Standard HTML fragment | Static pages and guides | Simple and reliable | Requires unique IDs |
| CSS smooth scrolling | Gentle movement between sections | Easy to maintain | Respect reduced-motion settings |
scroll-margin-top |
Pages with sticky headers | Keeps headings visible | Match the header height |
| JavaScript scrolling | Custom applications | Precise control | Can harm accessibility if poorly implemented |
For most informational pages, combining standard HTML with CSS is enough. JavaScript should not replace native anchors when a plain link can do the job. Native browser behaviour supports keyboard users, copied URLs, back-button navigation, and assistive technologies with less maintenance.
Test For Accessibility And Mobile Use
An anchor is successful when visitors can understand where they are, reach the target, and continue navigating. Test every link with a keyboard by using Tab and Enter, then check that focus is visible at the destination. A screen reader should announce a meaningful heading or landmark after the jump.
Mobile testing matters because Australian audiences may browse from a tram in Melbourne, a café in Perth, or a regional area where network performance varies. Keep targets large enough to tap, avoid links packed tightly together, and make sure the destination appears close to the top of the viewport.
Use this practical checking routine before publishing:
- Activate each link with a keyboard and touch.
- Confirm the target heading is visible below any fixed header.
- Resize the page and test portrait and landscape views.
- Copy a hash URL and open it in a new browser tab.
- Check the page with reduced motion enabled.
A final review should also cover browser history. After jumping to a section, the Back button should behave in a way that feels expected for the page structure. If custom JavaScript changes the URL or scroll position, test that behaviour carefully on current mobile and desktop browsers.
Keep Anchor Design Consistent
Anchor links work best as part of a consistent information architecture. Use a logical heading hierarchy, group related content under meaningful sections, and give repeated page patterns the same labels. Visitors should be able to predict what a link will do before selecting it.
When content changes, review its IDs as part of the publishing process. Renaming an ID can break bookmarks, shared links, search results, and references in help articles. If a section must be renamed, consider preserving the old anchor or creating a redirecting alternative where appropriate.
A clean anchor system supports accessible design, faster scanning, and clearer page sharing. With semantic HTML, restrained motion, suitable spacing, and practical testing, long pages can feel straightforward rather than cumbersome.