svg-scroll-progress

Summary

Floating circular scroll-to-top button anchored bottom-right. Renders as an SVG circular path with a stroked outline and a CSS-rendered chevron arrow whose colour is clipped from the brand gradient. Visibility toggles in based on scroll position via scrolltop.min.js.

HTML structure (minimal)

<div class="scroll-to-top">
  <svg class="scroll-top-inner" 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

.scroll-to-top {
  position: fixed; right: 30px; bottom: 30px;
  height: 50px; width: 50px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0, 46, 65, 0.2);
  border-radius: 50%;
  z-index: 90000;
  opacity: 0; visibility: hidden;
  transform: translateY(15px);
  transition: all 200ms linear;
}
.scroll-to-top.scroll-top-active {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}

.scroll-to-top::after {
  content: "\f106"; /* Font Awesome chevron-up */
  font-family: 'Font Awesome 5 Pro';
  position: absolute; left: 0; top: 0;
  height: 50px; width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;

  background: var(--theme-color);
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scroll-to-top .scroll-top-inner path {
  stroke-width: 4;
  fill: transparent;
  stroke: #EF721F;
  transition: all 200ms linear;
}

Animation logic

// scrolltop.min.js (vendored) measures scroll percentage and updates the
// SVG path's stroke-dashoffset so the orange ring "fills" as the user scrolls.
// Active visibility toggled via .scroll-top-active class on threshold.

Notable details

• The stroke-dashoffset trick on a circle is what gives the "progress ring fills as you scroll" feel — common in modern templates but executed cleanly here.
• The chevron is a Font Awesome glyph clipped to the brand gradient via -webkit-background-clip: text — same trick as the eyebrow / category text.
• Uses an inset box-shadow as the unfilled portion of the ring rather than a second SVG path — saves DOM weight.

Use when

• Long single-page sites where users will scroll past the fold many times.
• Templates that already use a scrolltop.min.js-style plugin and want a richer indicator than a plain arrow.

Caveats

• Font Awesome 5 Pro is paid; \f106 is the chevron, will gracefully fall back to a box if the font isn't loaded.
• inset 0 0 0 2px rgba(0,46,65,0.2) uses a colour outside the palette — a tiny smell that suggests this CSS came from an older template lineage.
• The progress ring depends on scrolltop.min.js being present; a pure CSS rebuild would need a JS scroll listener.