---
title: "Scroll Progress Button — Framer component · Best of Framer"
description: "$1.00 · Framer component · by Rishika Rai · Navigation. A scroll progress button helps users understand how far they have navigated through a page while also providing a quick way…"
canonical: "https://framer.elliotli.dev/component/scrollprogressbutton"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Scroll Progress Button

# Scroll Progress Button

Progres border showing page scroll state

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

![Scroll Progress Button preview image 1](https://framer.elliotli.dev/og/component/scrollprogressbutton/48a2e57d02366245/1600x1200.jpg)

## Summary

A scroll progress button helps users understand how far they have navigated through a page while also providing a quick way to return to the top.

## Description

**Why this component?**

Modern websites are often long and content-heavy. A scroll progress button helps users understand how far they have navigated through a page while also providing a quick way to return to the top.

This component adds a visual progress indicator around the button that fills as users scroll, improving navigation and enhancing the browsing experience with a clean, minimal interaction.

**Highlights:**

• Dynamic progress border that fills as users scroll

• Smooth scroll-to-top interaction with a single click

• Auto visibility – appears only after scrolling begins

• Lightweight and optimized for performance

• Clean, production-ready structure built specifically for Framer sites

**Customizable features:**

• Custom border color to match brand styles

• Custom background color

• Custom icon upload for full design flexibility

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

-   All · #8690

## Details

- **Author**: Rishika Rai
- **Price**: $1.00
- **Published**: 2026-03-06
- **Updated**: 2026-03-06
- **Added**: 2026-02-20
- **Categories**: Navigation

## More like this

-   [Status badge](/component/status-badge) — Lera · Free — Ready-to-use status badge component built for data-heavy interfaces.
-   [Magnetic Icons Dock](/component/magnetic-icons-dock) — Lera · $10 — Icon tiles magnetic navigation
-   [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