Back to top

Back to top is a fixed-position fragment link that appears after one viewport of scrolling on a long page. It returns to the document start without creating a separate keyboard model or duplicating navigation.

When to use#

• Long pages where the reader scrolls well past the header
• Only after a scroll threshold — short pages never show it
• Not a substitute for navigation; it complements the skip link, which works in the other direction

Implementation#

{{ partial "back-to-top.html" . }}

<a class="back-to-top" href="#top" data-back-to-top hidden>
  <span aria-hidden="true">↑</span>
  <span>Back to top</span>
</a>

const longPage = document.documentElement.scrollHeight > window.innerHeight * 2;
link.hidden = !(longPage && window.scrollY >= window.innerHeight);

layouts/_default/baseof.html places the document-start fragment before the skip link and the component after the footer, making it the last normal page control. The script only changes its visibility; following #top remains native browser behaviour. component.back-to-top.* tokens define its surface, border, inset, and padding.

Accessibility#

• Must render as a real <a> element that screen readers announce as a link
• Must be last in the tab order, so it never interrupts the reading sequence
• Must be activatable from the keyboard, not only by pointer
• Avoid more than one per page — one link, one destination
• The target is programmatically focusable but not tabbable, so fragment navigation gives assistive technology a stable destination without adding a stop before the skip link
• The control is hidden with the native hidden attribute until needed; it is not exposed to the tab order on short pages or near the top