scroll-to-top

Summary

Custom-element scroll-top button (bottom-right circular SVG) that fades in past a scroll threshold and smooth-scrolls to top on click. Built as a <scroll-top> Web Component so dropping the element anywhere in the document Just Works.

HTML structure (minimal)

<scroll-top class="scroll-top" aria-label="scroll to top">
  <svg class="icon-20" viewBox="0 0 20 20" fill="none">
    <path d="M10 4L10 16M10 4L4 10M10 4L16 10" stroke="currentColor" stroke-width="2"/>
  </svg>
</scroll-top>

Key SCSS tokens

.scroll-top {
  position: fixed;
  bottom: 32px; right: 32px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 99;
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

Animation logic

class ScrollTop extends HTMLElement {
  connectedCallback() {
    window.addEventListener("scroll", this.onScroll.bind(this));
    this.addEventListener("click", () => {
      window.scrollTo({ top: 0, behavior: "smooth" });
    });
  }
  onScroll() {
    if (window.pageYOffset > 300) {
      this.classList.add("is-visible");
    } else {
      this.classList.remove("is-visible");
    }
  }
}
customElements.define("scroll-top", ScrollTop);

Notable details

• The pointer-events: none at rest prevents clicks from bleeding through to underlying content even when the button is invisible — important for fixed bottom-right widgets that overlay CTAs.
• Smooth scroll is delegated to native window.scrollTo({ behavior: "smooth" }) — no Lenis/locomotive needed, and it respects prefers-reduced-motion automatically in modern browsers.
• 300px threshold means the button only appears once the user has actually scrolled past the hero.

Use when

• Any long-scroll landing page where users may drift far from the top.
• Sites without Lenis/Locomotive that still want a smooth scroll-to-top.
• Custom-element-driven pages where you want zero global JS state.

Caveats

• The button is hidden at first paint (opacity 0 + pointer-events none) and only fades in once the user has scrolled past 300px — the screenshot pipeline will fall back to a palette gradient placeholder for this component.
• The visible state at first paint can flicker if your CSS loads after the initial scroll position is set; transform: translateY(8px) defaults guard against the worst case but check on slow networks.
• No keyboard activation handler beyond the implicit <button> — wrap the SVG in <button type="button"> if you need full a11y compliance.