Back to Top (Ring)

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.