scroll-back-to-top

Summary

A fixed circular SVG button in the bottom-right corner. The button's stroke acts as a progress ring that fills as the page scrolls, doubling as a scroll indicator and a back-to-top control.

HTML structure (minimal)

<div class="backtotop-wrap cursor-pointer">
  <svg class="backtotop-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
    <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
  </svg>
</div>

Key SCSS tokens

.backtotop-wrap {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: block;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.4s ease;
  &.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  &::after {
    content: "\f176"; /* fa-arrow-up */
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--clr-theme-primary);
  }
}
.backtotop-circle path {
  fill: none;
  stroke: var(--clr-theme-primary);
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear;
}

Animation logic

// Pattern used across this codebase: bind scroll, compute % progress, set stroke-dashoffset
const progressPath = document.querySelector(".backtotop-circle path");
const pathLength   = progressPath.getTotalLength();
progressPath.style.strokeDasharray  = `${pathLength} ${pathLength}`;
progressPath.style.strokeDashoffset = pathLength;

window.addEventListener("scroll", () => {
  const scroll = window.pageYOffset;
  const height = document.documentElement.scrollHeight - window.innerHeight;
  const progress = pathLength - (scroll * pathLength) / height;
  progressPath.style.strokeDashoffset = progress;
});

// Click → smooth scroll back
document.querySelector(".backtotop-wrap")
  .addEventListener("click", () => window.scrollTo({ top: 0, behavior: "smooth" }));

Notable details

• One SVG path doubles as the visual ring and the progress meter — stroke-dashoffset shrinks as you scroll.
• active-progress class fades the widget in only after the page has scrolled past a threshold, so it doesn't sit on top of the hero.
• The arrow-up glyph is drawn via a ::after pseudo-element using Font Awesome's \f176 codepoint — no extra DOM, no extra image.

Use when

• Long product or content pages where users want a compact way back to the top.
• Storefronts where a tactile scroll indicator adds polish without committing to a full progress bar.
• Templates that already use Font Awesome (so the arrow glyph is free).

Caveats

• The arrow icon is rendered via Font Awesome 6 Pro — substitute a regular FA glyph or inline SVG arrow for free builds.
• getTotalLength() is reliable on the path used here, but mind that some browsers measure slightly differently — test progress accuracy at 100% scroll.