Back to top

A floating pill that takes you back to the top of a long page. Black with white caps and a thin white stroke, so it shows on white, newsprint and black.

Script

The pill starts hidden. A few lines show it once the page’s opening block is out of view, and send focus to the top on click.

<a class="sys-to-top" href="#top"><svg viewBox="0 0 12 12" aria-hidden="true"><path d="M6 11V1.5M1.5 6 6 1.5 10.5 6"/></svg>Top</a>

const top = document.querySelector('.sys-to-top'), intro = document.querySelector('.intro'),   // the opening block
      target = document.getElementById('top');                                               // the h1, with tabindex="-1"
new IntersectionObserver(([e]) => top.classList.toggle('is-shown', !e.isIntersecting)).observe(intro);
top.addEventListener('click', e => {
  e.preventDefault();
  const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
  scrollTo({top: 0, behavior: still ? 'auto' : 'smooth'});
  target.focus({preventScroll: true});
});

Parts

Stipulations

• Always the arrow. It’s a pill, like a tag, and tags never take a click; the arrow is what says this one does. With the toggle, it’s one of only two clickable pills.
• One per page, only on pages longer than about three screens. Never inline with tags, and never with a label other than “Top”.
• Bottom right, 16px from the edges plus the device’s safe area, so it clears the iPhone toolbar.
• Hidden while the opening block is on screen; it appears once that block scrolls away and disappears again near the top.
• The white stroke stays on every background: it’s what keeps the pill visible over black areas and dark artwork.
• Type turns yellow on hover, as on any black. Smooth scroll, or a jump with reduced motion; focus moves to the page’s title so keyboard and screen reader users land at the top too. The title gets tabindex="-1", which the system draws without a focus ring.