Resources
Desktop app
Marketplace
Community
Developers
Wallpapers
Meetups
Company
Security
Careers
Report
Status
Legal
Blog
Creators
Program
Payouts
Experts
Awards
Events
Brand
Compare
Squarespace
Wordpress
Unbounce
Webflow
Figma
Wix
Solutions
Figma to HTML
Website builder
Portfolio maker
Landing pages
UI/UX design
No-code
Socials
Instagram
X Twitter
YouTube
LinkedIn
Threads
TikTok
    Component preview thumbnail
    MarketplaceComponents

    Back To Top Button

    A sleek, customizable back-to-top button with icons, shapes, hover effects, and smooth scrolling.

    Ephraim Adjanor
    Creator
    2d ago
    Updated
    9
    Installs
    Ephraim Adjanor
    Creator
    2d ago
    Updated
    9
    Installs

    Make it with Workshop

    Build your own component with AI

    Framer
    EnterprisePricing
    Enterprise
    Pricing
    Marketplace
    TemplatesPluginsComponents
    Templates
    Plugins
    Components

    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.

    Support
    About ComponentsRefund PolicyContact Creator

    More Components

    See All →
    Thumbnail for Minimal Coordinates, a Framer Marketplace template by Foram.
    Minimal Coordinates
    Free
    Foram
    Thumbnail for Team Members Grid, a Framer Marketplace template by Mohd Mehraj.
    Team Members Grid
    $15
    Mohd Mehraj
    Thumbnail for Lightbox Masonry , a Framer Marketplace template by EvolveHub.
    Lightbox Masonry
    $12
    EvolveHub
    Thumbnail for TextScrambler, a Framer Marketplace template by Solt Wagner.
    TextScrambler
    Free
    Solt Wagner
    Thumbnail for Animated Blob Image, a Framer Marketplace template by Sadman Alam.
    Animated Blob Image
    $8
    Sadman Alam
    Thumbnail for Easy FAQ Builder, a Framer Marketplace template by Rafa Vaz.
    Easy FAQ Builder
    $5
    Rafa Vaz
    Thumbnail for Motion Tiles, a Framer Marketplace template by Uzair J..
    Motion Tiles
    Free
    Uzair J.
    Thumbnail for Fossil Image , a Framer Marketplace template by Pixels.
    Fossil Image
    $3
    Pixels