128Views

0Likes

0Downloads

Code · Live Preview

Componenthtml

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scroll to Top — Modern FAB</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header
      class="px-16 py-4 relative flex items-center justify-between border-b"
    >
      <div>
        <a href="#">
          <img
            src="https://www.codekk.dev/logo-icon.svg"
            alt="Logo"
            class="w-[110px] h-6"
          />
        </a>
      </div>
      <nav>
        <ul class="flex space-x-6 text-sm text-zinc-400">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main class="max-w-5xl mx-auto px-6 py-24 space-y-8">
      <section
        class="flex items-center justify-center w-full h-80 border rounded-lg"
      >
        <h2>Section 1</h2>
      </section>
      <section
        class="flex items-center justify-center w-full h-80 border rounded-lg"
      >
        <h2>Section 2</h2>
      </section>
      <section
        class="flex items-center justify-center w-full h-80 border rounded-lg"
      >
        <h2>Section 3</h2>
      </section>
      <section
        class="flex items-center justify-center w-full h-80 border rounded-lg"
      >
        <h2>Section 4</h2>
      </section>
    </main>

    <!-- ══════════ SCROLL-TO-TOP FAB ══════════ -->
    <button
      class="scroll-top-btn"
      id="scrollTopBtn"
      aria-label="Scroll to top"
      title="Scroll to top"
    >
      <svg class="progress-ring" viewBox="0 0 56 56">
        <defs>
          <linearGradient
            id="progressGradient"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop offset="0%" stop-color="#8b5cf6" />
            <stop offset="100%" stop-color="#6366f1" />
          </linearGradient>
        </defs>
        <circle class="progress-ring__bg" cx="28" cy="28" r="24" />
        <circle
          class="progress-ring__fill"
          id="progressCircle"
          cx="28"
          cy="28"
          r="24"
        />
      </svg>

      <div class="ripple-ring" id="rippleRing"></div>

      <div class="fab-inner">
        <svg class="arrow-icon" viewBox="0 0 24 24">
          <path d="M12 19V5" />
          <path d="M5 12l7-7 7 7" />
        </svg>
        <span class="pct-text" id="pctText">0%</span>
      </div>
    </button>

    <footer
      class="border-t border-white/5 py-8 text-center text-zinc-500 text-sm"
    >
      <p>Scroll-to-Top FAB Demo — Built with HTML, CSS & JavaScript</p>
    </footer>

    <script src="app.js"></script>
  </body>
</html>

Detecting libraries...

Component details

Overview, install command, dependencies, and project links.

A smooth animated scroll-to-top FAB button with circular SVG progress ring, live scroll percentage, ripple effect, and pulse glow. Pure HTML, CSS & JavaScript.

Added Apr 11, 2026

Discussion

Feedback, implementation tips, and usage notes.

0 threads

Component details

Discussion

Comments