Back-to-top

First posted on November 7, 2025 — last updated on November 8, 2025

Table of Contents
  1. What is the Back-to-top?
  2. Why do we need it?
  3. How to build it
  4. Getting fancy
  5. Finishing touches

Skipping to the main content is important, but what if you want to go back to the top of a long page? Here comes our next (accessible) essential blog component: the Back-to-top.

What is the Back-to-top?

The Back-to-top it’s a button (at least aesthetically) that allows the user to move its viewport and focus back to the top of the page with a single click.

Why do we need it?

Browser do provide a built-in way to scroll back to the top (like pressing the Home key on Windows), however:

  1. not all users are aware of it, and more importantly…
  2. while it scrolls the page, it doesn’t actually move the focus back to the top of the page!

This can be disorienting for keyboard and screen reader users, as they might expect to be back at the beginning of the page with the focus too.

How to build it

It all starts with a simple anchor link, placed just before the footer of the page:

<div class="back-to-top">
  <a>Back to top</a>
</div>

But what value should the href attribute have, you ask? Well, it’s time to dust off our old friend, the (informal) href placeholder: the lonely hash (#).

Because yes, while mostly misused as a placeholder for non-functional links (psst, javascript:void(0) is what you’re looking for), the hash alone actually has a defined behavior in the browser: it takes you to the top of the page!

But, quite unfortunately, it still doesn’t move the focus… so, what’s the solution?

Just as we did for the Skip-links, we have to target the <main> element:

<main id="main" tabindex="-1">...</main>
<div class="back-to-top">
  <a href="#main">Back to top</a>
</div>

And there we go! Both the viewport and focus return to the start of the main content.

Getting fancy

Smooth scrolling? Yes, please!

Smooth scrolling can be easily achieved by setting scroll-behavior: smooth on your <html> element. Just don’t forget to honour user preferences by wrapping it in a media query:

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Now, you might think it’d be super-duper cool to show the Back-to-top button only after scrolling. That’s fine as long as you don’t hide it while it’s focused.

If an element disappears while it has focus, it disrupts the user’s navigation flow: this is a failure of WCAG 2.2 Success Criterion 2.4.3: Focus Order.

If you really must toggle visibility, you can do it safely in pure CSS by hiding it only when the container has :not(:focus-within).

Finishing touches

Since you could be relying on a solitary arrow-up icon and no visible text for your Back-to-top component, be mindful about three things:

  1. add an aria-label - or better yet - a visually-hidden text to grant an accessible name to the element;
  2. hide the icon to assistive technologies with with an empty alt="" if it’s an <img> or with an aria-hidden="true" if it’s an <svg> or a Unicode character;
  3. repeat the label in the title attribute to add a native tooltip for sighted users.

The result should be something along these lines:

<div class="back-to-top">
  <a href="#main" title="Back to top">
    <span class="visually-hidden">Back to top</span>
    <span aria-hidden="true">↑</span>
  </a>
</div>

That’s it. The Back-to-top is a deceptively simple feature (it has literally one purpose!) but still, it’s easy to miss the accessibility part by just scrolling the page visually.

Until next time, be (and code) well!