Back To Top Button

Enhance your site’s navigation with the Back to Top component, an elegant scroll-to-top button built for flexibility, style, and performance.

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. 📖 Usage Guide 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. ✅ Best Practices 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.