Back to Top (Ring)

Back to top with scroll progress

Back To Top Button adds a floating, fixed-position back-to-top button to any Framer site — with a circular progress ring that fills as the user scrolls down, then smoothly dismisses when they return to the top. Progress ring Ring Style — Gradient (purple → blue → teal, dynamically shifting as scroll progress increases) or Custom (a flat color of your choosing). Ring Width — 1–10px thickness. Glow Effect — an optional soft glow around the ring, matching either the gradient or a custom color. Intensity scales with scroll progress so the glow builds as you approach the bottom. Glow Intensity — control how strong the glow is at 100% scroll. Button Button Color — background fill of the inner circle. Icon Color — color of the upward arrow. Button Size — 40–100px diameter. Shadow — optional drop shadow on the inner circle. Hover Effect — scales the button to 1.05× on hover for a tactile feel. Visibility & animation Visibility — three modes: Always Show (visible from page load), Show on Scroll (appears after the threshold is reached), or Hidden (useful for preview/testing). Show Threshold — scroll distance in pixels before the button appears (default: 300px). Only visible when Visibility is set to "Show on Scroll." Animation — enables smooth fade + scale entrance and exit when the button appears/disappears. Animation Speed — 0.1–1s duration for the entrance/exit transition. Position Bottom Offset — distance from the bottom edge of the viewport. Right Offset — distance from the right edge of the viewport.

Back to top with scroll progress