Enhance your site’s navigation with the Back to Top component, an elegant scroll-to-top button built for flexibility, style, and performance.
🎨 Fully Customizable – Choose circle, rounded, or square shapes; 5 icon styles (arrow, chevron, caret, double, rocket); custom colors, borders, shadows, and pulsing animations.
⚡ Smart Behavior – Show only when users scroll down, pick smooth or instant scrolling, adjust speed, and control visibility on desktop or mobile.
✅ Canvas-Friendly – Drag and drop onto your design, then fine-tune everything from size and placement to hover states all in the properties panel.
Perfect for long pages, blogs, product catalogs, or any content-heavy site. Give users an effortless way back to the top while keeping your design polished and professional.
Add to Project
In Framer, go to the Insert menu (I key) and select Code Components.
Drag Back to Top onto your canvas.
Select it to open the properties panel and customize size, shape, icon, and scroll type.
Properties Panel
Size: Set button size (32–320px; 48–64px works best).
Shape: Circle, rounded, or square.
Icon: Arrow, chevron, caret, double, or rocket.
Colors: Customize fill, icon, and hover states.
Border & Shadow: Add subtle depth or keep it flat.
Pulse Animation: Optional visual cue to draw attention.
Show After: Set scroll threshold (e.g., 0.25 = 25% down the page).
Placement: Bottom-right, left, or center with adjustable offsets.
Scroll Speed: Smooth scrolling (100–3000ms).
Scroll Type: Instant or smooth.
Mobile Toggle: Show/hide on screens ≤768px.
Use Fixed = true and Always Show = false so it only appears when needed.
Keep sizes between 48–64px for best visibility and usability.
Test mobile behavior separately with Show on Mobile = true for touch UX.
Use high-contrast colors between background and icon for accessibility.
Place on long pages (blogs, catalogs, landing pages) to maximize utility.
Devlance Design
