---
title: "Back To Top Button — Free Framer component · Best of Framer"
description: "Free Framer component · by The Velox Studio · Buttons. Enhance your site’s navigation with the Back to Top component, an elegant scroll-to-top button built for flexibility, style, and performance."
canonical: "https://framer.elliotli.dev/component/back-to-top-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Back To Top Button

# Back To Top Button

[View on Framer](https://framer.com/marketplace/components/back-to-top-button/?via=elliot-li)

![Back To Top Button preview image 1](https://framer.elliotli.dev/og/component/back-to-top-button/b64ecb15654b5b96/1600x1200.jpg)

## Summary

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

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1300

## Details

- **Author**: The Velox Studio
- **Published**: 2025-09-30
- **Updated**: 2025-09-30
- **Added**: 2025-09-22
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything