Scroll Progress Link To Top (SPLT)

Requirements

• Modern CSS Only - no HTML markup, no JS
• Drop-in CSS component file and it just works
• Applies to any naturally vertically overflowing element
• Modern standards compliant
• Follows modern best practices
• Future proofed - zero dependencies
• Accessible via mouse, keyboard, and tap (mobile)
• Screen-readers ignore

Features

• Modern CSS drawn circle progress indicator
• Numeric percentage in center of CSS circle
• CSS circle = link color (Translucent)
• CSS circle hover color = link hover color
• Clicking CSS circle = smooth-scrolls user to top of scrolling element
• CSS circle = display: none; by default
• CSS circle = display: grid; when element = scrolling state