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 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.
Anwaar Ansari
