A back-to-top button floats in the bottom-right corner, appearing after the user scrolls past a threshold (usually 300px). Clicking it smooth-scrolls back to the top. Essential for long pages.
Key implementation: position: fixed + z-index: 999 for constant visibility. window.scrollTo({top:0, behavior:'smooth'}) for one-line smooth scroll. Throttle scroll events with requestAnimationFrame. Use opacity transitions for fade-in/out.
Common pitfalls: Unthrottled scroll events cause jank. z-index too low gets covered. Mobile bottom tab bar overlaps button. behavior:'smooth' needs polyfill for old browsers.
Variants: SVG progress ring showing scroll percentage, long-press fast-scroll, bounce animation, slide-in entrance, icon with rotation.
Full copy-paste code available above. Questions? Leave a comment.
Top comments (0)