Scroll to Top Button — Free HTML CSS JS Snippet

<div class="page" id="page">
  <div class="content">
    <div class="hero-text">
      <h1>Scroll down to see<br>the back-to-top button</h1>
      <p>The button appears when you scroll more than 300px. Click it to smoothly scroll back to the top.</p>
    </div>
    <div class="blocks">
      <div class="block">Section 1</div>
      <div class="block">Section 2</div>
      <div class="block">Section 3</div>
      <div class="block">Section 4</div>
      <div class="block">Section 5</div>
    </div>
  </div>

  <!-- Scroll to top button -->
  <button
    class="stt-btn"
    id="stt-btn"
    onclick="scrollToTop()"
    aria-label="Scroll to top"
    title="Back to top"
  >
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="18 15 12 9 6 15"/>
    </svg>
    <div class="stt-ring" id="stt-ring"></div>
  </button>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: system-ui, sans-serif; background: #fff; overflow-x: hidden; }

.page { min-height: 400vh; position: relative; }

.content { max-width: 600px; margin: 0 auto; padding: 60px 24px; display: flex; flex-direction: column; gap: 20px; }
.hero-text h1 { font-size: clamp(24px,4vw,40px); font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.hero-text p { font-size: 15px; color: #64748b; }
.blocks { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 40px; font-size: 14px; color: #64748b; font-weight: 500; text-align: center; }

/* Scroll to top button */
.stt-btn { position: fixed; bottom: 28px; right: 28px; width: 48px; height: 48px; border-radius: 50%; background: #6366f1; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(99,102,241,0.35); z-index: 50; opacity: 0; transform: translateY(16px) scale(0.9); transition: opacity 0.3s, transform 0.3s, background 0.15s; pointer-events: none; position: fixed; }
.stt-btn.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.stt-btn:hover { background: #4f46e5; transform: translateY(-2px) scale(1.05); }
.stt-btn:active { transform: scale(0.95); }

/* Progress ring */
.stt-ring { position: absolute; inset: -4px; border-radius: 50%; }

/* SVG ring drawn by JS */
.stt-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 3; }
.ring-fill  { fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }

const btn = document.getElementById('stt-btn');
const ringWrap = document.getElementById('stt-ring');
const SHOW_AT = 300;

// Build SVG progress ring inside button
const r = 26;
const circ = 2 * Math.PI * r;
ringWrap.innerHTML = '<svg viewBox="0 0 60 60" width="60" height="60"><circle class="ring-track" cx="30" cy="30" r="' + r + '"/><circle class="ring-fill" id="ring-fill" cx="30" cy="30" r="' + r + '" stroke-dasharray="' + circ + '" stroke-dashoffset="' + circ + '"/></svg>';
const ringFill = document.getElementById('ring-fill');

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
  const pct = maxScroll > 0 ? scrollY / maxScroll : 0;

  // Show/hide button
  btn.classList.toggle('visible', scrollY > SHOW_AT);

  // Update progress ring
  ringFill.style.strokeDashoffset = circ * (1 - pct);
}, { passive: true });

function scrollToTop() {
  const start = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
  if (!start) return;
  const duration = 500;
  const t0 = performance.now();
  function step(now) {
    const p = Math.min((now - t0) / duration, 1);
    const ease = 1 - Math.pow(1 - p, 3);
    const y = start * (1 - ease);
    window.scrollTo(0, y);
    document.documentElement.scrollTop = y;
    document.body.scrollTop = y;
    if (p < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}