HTML

<a class="scroll-top" href="#">
  <!-- Here you can place an icon, for example -->
  <span>↑</span>
  <svg class="scroll-top__circle" viewBox="0 0 40 40">
    <!-- Half of the thickness of the circle must be subtracted from the radius, otherwise the graphic will be cut off -->
    <circle class="scroll-top__progress" cx="20" cy="20" r="18"/>
  </svg>
</a>

CSS

.scroll-top {
  --size: 40px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  text-decoration: none;
}
.scroll-top__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  paint-order: stroke;
}
.scroll-top__progress {
  fill: none;
  stroke: currentColor;
  stroke-width: 2; /* Pay attention to the radius */
}

JavaScript

// Reference element
const scrollProgress = document.querySelector('.scroll-top__progress');

// Update the CSS properties «stroke-dasharray» and «stroke-dashoffset» while scrolling
window.addEventListener('scroll', () => {
  if (scrollProgress) {
    const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
    const radius = parseFloat(scrollProgress.getAttribute('r'));
    const circumference = 2 * Math.PI * radius;
    const offset = circumference * (1 - (scrollPercentage / 100));
    scrollProgress.style.strokeDasharray = circumference + ' ' + circumference;
    scrollProgress.style.strokeDashoffset = offset;
  }
});

// Trigger scroll event to apply the CSS properties for the first time
window.dispatchEvent(new Event('scroll'));