(function() { // 1. Create and inject CSS const style = document.createElement('style'); style.textContent = ` /* Container - 60x60 fixed */ .progress-wrap { position: fixed; right: 24px; bottom: 175px; height: 60px; width: 60px; cursor: pointer; display: grid; place-items: center; z-index: 1000; text-decoration: none; background: transparent; /* Scroll-linked visibility */ opacity: 0; transform: translateY(20px); pointer-events: none; animation: toggle-btn linear forwards; animation-timeline: scroll(); animation-range: 0px 300px; } .progress-wrap > * { grid-area: 1 / 1; } /* Circle - Restored 2px stroke and 29 radius */ .progress-circle { width: 60px; height: 60px; } .progress-circle .track { fill: none; stroke: rgba(0,0,0,0.1); stroke-width: 2; } .progress-circle .fill { fill: none; stroke: #FD5E0C; stroke-width: 2; stroke-linecap: round; /* 2 * PI * 29 = ~182 */ stroke-dasharray: 182; stroke-dashoffset: 182; animation: fill-progress linear; animation-timeline: scroll(); } /* Arrow - Restored 2px stroke and 24px height */ .arrow-icon { width: 24px; height: 24px; stroke: #FD5E0C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @keyframes fill-progress { to { stroke-dashoffset: 0; } } @keyframes toggle-btn { to { opacity: 1; transform: translateY(0); pointer-events: all; } } `; document.head.appendChild(style); // 2. Create and inject HTML // Circle path: Radius 29 for a clean 2px stroke look const btnHtml = ` `; document.body.insertAdjacentHTML('beforeend', btnHtml); // 3. Smooth scroll functionality const scrollBtn = document.getElementById('scrollToTop'); scrollBtn.addEventListener('click', (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); })();