Back to Top

Create a back-to-top button with a scroll progress ring. A circular ink button (36-40px, up-arrow icon, soft shadow) fixed to the bottom-right of the scroll area. It stays hidden until the reader has scrolled past ~12% of the page, then pops in with a spring (from 50% scale and 8px down, stiffness 460, damping 26); scrolling back near the top pops it away the same way. Wrapped around the button's edge is a progress ring: an SVG circle (2px stroke) whose accent arc reflects how far down the page the reader is: strokeDasharray = circumference, strokeDashoffset = circumference × (1 - progress), rotated -90deg so it fills from 12 o'clock, updated on scroll with a 0.1s linear transition. A faint paper-tinted track circle sits behind it so the ring reads at any progress. Clicking scrolls smoothly back to the top (scrollTo with behavior: 'smooth'); the ring drains as the page glides up. Hover scales the button to 108%, press squashes to 90%. Compute progress as scrollTop / (scrollHeight - clientHeight), guarding against division by zero on short pages. Accessibility: aria-label 'Back to top'; the button must be keyboard-focusable when visible. If prefers-reduced-motion is set, jump to the top instantly and swap the button's visibility without the spring. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.