🚀 Step-by-Step Scroll To Top Button with Conic Gradient

Let’s build a beautiful scroll-to-top button using HTML, CSS, and JavaScript — with a scroll percentage and a conic gradient progress bar.

✅ Live Demo

🧱 Step 1: Add the HTML Button

This is the button that will sit in the bottom-right corner of the screen.

<button class="scrollTopButton hide">
  <span class="box">
    <span class="percentage">0%</span>
    <span class="icon"><i class="fa-solid fa-arrow-up"></i></span>
  </span>
</button>

.percentage will show how much you’ve scrolled.
.icon is the up arrow using Font Awesome.
.hide class keeps it hidden when scroll is less than 5%.

🎨 Step 2: Style the Button with CSS

.scrollTopButton {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#2b2692 0%, #e0e0e0 0%);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  padding: 0.4rem;
  transition: 0.3s ease;
  z-index: 100;
}

✅ This makes the button round, positions it, and sets a starting conic gradient.

✨ Step 3: Add Inner Hover Animation

.scrollTopButton .box {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1;
  background-color: #4f46e5;
  border-radius: 50%;
  overflow: hidden;
}
.scrollTopButton .box > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1;
  transition: transform 0.3s;
}
.scrollTopButton:hover .box > span {
  transform: translateY(-100%);
}

👻 Step 4: Hide Button When Scroll Is Low

.scrollTopButton.hide {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

✅ This hides the button when scroll is less than 5%.

⚙️ Step 5: JavaScript for Scroll Logic

const scrollTopButton = document.querySelector('.scrollTopButton');
const percentText = document.querySelector('.percentage');

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  const docHeight = document.body.scrollHeight - window.innerHeight;
  const percent = Math.round((scrollTop / docHeight) * 100);

  percentText.textContent = `${percent}%`;
  scrollTopButton.style.background = `conic-gradient(#2b2692 ${percent}%, #e0e0e0 ${percent}%)`;

  if (percent > 5) {
    scrollTopButton.classList.remove('hide');
  } else {
    scrollTopButton.classList.add('hide');
  }
});

✅ This script:

Calculates the scroll percentage.
Updates the gradient.
Shows/hides the button as needed.

🔼 Step 6: Scroll to Top on Click

✅ Smoothly scrolls back to the top of the page when clicked.

scrollTopButton.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

💡 Done! Now you have a stylish scroll-to-top button with live scroll percentage and progress indicator using just HTML, CSS, and JS.

Tags scroll to top button scroll percentage button conic gradient css javascript scroll button html scroll to top back to top button animated scroll button conic gradient progress smooth scroll javascript ui components with css