---
title: "Back to Top (Ring) — Free Framer component · Best of Framer"
description: "Free Framer component · by Anwaar Ansari · Navigation. Back to top with scroll progress"
canonical: "https://framer.elliotli.dev/component/back-to-top-ring"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Back to Top (Ring)

# Back to Top (Ring)

Back to top with scroll progress

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

![Back to Top (Ring) preview image 1](https://framer.elliotli.dev/og/component/back-to-top-ring/2d42f06576fe5162/1600x1334.jpg)

## Summary

Back to top with scroll progress

## Description

**Back To Top Button** adds a floating, fixed-position back-to-top button to any Framer site — with a circular progress ring that fills as the user scrolls down, then smoothly dismisses when they return to the top.

**Progress ring**

-   **Ring Style** — Gradient (purple → blue → teal, dynamically shifting as scroll progress increases) or Custom (a flat color of your choosing).
    
-   **Ring Width** — 1–10px thickness.
    
-   **Glow Effect** — an optional soft glow around the ring, matching either the gradient or a custom color. Intensity scales with scroll progress so the glow builds as you approach the bottom.
    
-   **Glow Intensity** — control how strong the glow is at 100% scroll.
    

**Button**

-   **Button Color** — background fill of the inner circle.
    
-   **Icon Color** — color of the upward arrow.
    
-   **Button Size** — 40–100px diameter.
    
-   **Shadow** — optional drop shadow on the inner circle.
    
-   **Hover Effect** — scales the button to 1.05× on hover for a tactile feel.
    

**Visibility & animation**

-   **Visibility** — three modes: Always Show (visible from page load), Show on Scroll (appears after the threshold is reached), or Hidden (useful for preview/testing).
    
-   **Show Threshold** — scroll distance in pixels before the button appears (default: 300px). Only visible when Visibility is set to "Show on Scroll."
    
-   **Animation** — enables smooth fade + scale entrance and exit when the button appears/disappears.
    
-   **Animation Speed** — 0.1–1s duration for the entrance/exit transition.
    

**Position**

-   **Bottom Offset** — distance from the bottom edge of the viewport.
    
-   **Right Offset** — distance from the right edge of the viewport.
    

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

-   All · #2015

## Details

- **Author**: Anwaar Ansari
- **Published**: 2026-07-17
- **Updated**: 2026-07-17
- **Added**: 2026-07-17
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation