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.

🎨 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

1. In Framer, go to the Insert menu (I key) and select Code Components.

2. Drag Back to Top onto your canvas.

3. 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.