简单好看的 scrollTop返回顶部

白色中间可以放入任何icon 小图标

---

创建div

做好的div,和支撑高度的盒子。
位置就三层，外面黑色，中间白色，里面图标

<div id="progress">
  <span id="progress-value">
      <i class="fa-solid fa-arrow-up"></i>
  </span>
</div>
<div style="height: 5000px;">

---

CSS的样式

样式其实很明显！也是那三层。唯独html的scroll-behavior
就是为了返回顶部有一个滑动！不然嗖的一下就顶部了！视觉效果打5折

  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
  }

  #progress {
      position: fixed;
      bottom: 20px;
      right: 10px;
      height: 70px;
      width: 70px;
      display: none;
      place-items: center;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      z-index: 999;
  }
  #progress-value {
      display: block;
      height: calc(100% - 15px);
      width: calc(100% - 15px);
      border-radius: 50%;
      display: grid;
      background-color: #fff;
      place-items: center;
      font-size: 35px;
      color: #fff;
  }
  #progress i {
      color: #000;
      font-size: 20px;
  }

---

最后的js

首先获取这几个元素以及滑动的位置
当前滑动大于100以上就显示布局，否则隐藏
一点击就返回顶部
最后就是最外层的黑色 用的是中轴的拉伸百分比

let calcScrollValue = () => {
  let scrollProgress = document.getElementById("progress");
  let porogressValue = document.getElementById("progress-value");
  let pos = document.documentElement.scrollTop;
  let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let scrollValue = Math.round((pos * 100) / calcHeight);
  if (pos > 100) {
      scrollProgress.style.display = "grid";
  }
  else {
      scrollProgress.style.display = "none";
  }
  scrollProgress.addEventListener("click", () => {
      document.documentElement.scrollTop = 0;
  });
  scrollProgress.style.background = `conic-gradient(#1F1F1F ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
};
window.onscroll = calcScrollValue;
window.onload = calcScrollValue;