Prototype Library

Back to Top

Floating button that appears once the page is scrolled past a threshold and smooth-scrolls back to the top on click.

Inherited wc import '@esa/ecology/esa-back-to-top';

Try it

The element is mounted on this page. Scroll down past ~300px and a button appears pinned to the bottom-right corner — click it to smooth-scroll back up.

<esa-back-to-top></esa-back-to-top>

Keep scrolling… the back-to-top button is pinned bottom-right.

API

Attributes and properties:

PropTypeDefaultDescription
threshold number 300 Scroll distance (px) before the button fades in.
smooth-scroll boolean true Smooth vs instant scroll-to-top. (Property: smoothScroll.) Property: `smoothScroll`. On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value.
scrollTarget HTMLElement | null null JS-only property — element to track instead of window. Set as a JS property — there is no attribute.
visible boolean false Reflected attribute set when scrolled past the threshold; drives the fade/translate.

No custom events — clicking the button scrolls the target (or window) to the top directly.

Accessibility

  • Renders a native <button> with aria-label="Back to top".
  • While hidden it is pointer-events: none with opacity: 0, so it isn't a click target until visible.
  • Visible focus ring via the --focus-ring-* tokens; the chevron icon is aria-hidden.