0

window.addEventListener('scroll', function(){
  const scrollCount = window.pageYOffset;
   const bodyHeight = document.body.offsetHeight;
  console.log(scrollCount, bodyHeight)
})
.prgoress_scrollup {
  position: fixed;
    right: 80px;
    bottom: 40px;
    height: 48px;
    width: 48px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 119, 249, 0.2);
    z-index: 2;
    transition: all 200ms linear !important;
}

body { background: #000; }

.prgoress_scrollup svg.progress-circle path { stroke: #ff7426; stroke-width: 4; box-sizing: border-box; transition: all 200ms linear !important; } .prgoress_scrollup svg path { fill: none; }

p { color: #fff; }

  • { box-sizing: border-box;

}

<div class="prgoress_scrollup active-progress">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" 

            style="transition: stroke-dashoffset 10ms linear 0s; 

            stroke-dasharray: 307.919, 307.919; 

            stroke-dashoffset: 48.0429;"></path>
        </svg>
    </div>
  <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>

  p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>

    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>

    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>

    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>

    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
  <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
<p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
    <p>Lorem  fugiat, explicabo veritatis sit ue eligendi sunt, perspiciatis.</p>
front
  • 1
  • Взгляните сюда - https://ru.stackoverflow.com/questions/760290/%D0%9F%D0%BE%D0%BC%D0%BE%D0%B3%D0%B8%D1%82%D0%B5-%D1%81-dasharray-%D0%B8-dashoffset?ysclid=lkkuwtv18t742283314 – Quazimorda Jul 27 '23 at 07:53

0 Answers0