---
title: "ScrollProgress btn — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Dulaj Design · Interactive. Visual scroll tracking navigation"
canonical: "https://framer.elliotli.dev/component/scrollprogress-btn"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/ScrollProgress btn

# ScrollProgress btn

Visual scroll tracking navigation

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

![ScrollProgress btn preview image 1](https://framer.elliotli.dev/og/component/scrollprogress-btn/edccee8919e9e708/1600x1200.jpg)

## Summary

Visual scroll tracking navigation

## Description

### About

ScrollProgress brings a stylish and functional scroll tracker to your Framer site. Whether you are building a long blog post or a deep-dive landing page, this component helps users visualize their reading progress while providing a quick, seamless way to jump back to the top of the page.

### What it does

It tracks the user's scroll position in real-time and displays it through three distinct visual styles. The component handles all the progress calculations automatically and includes an optional "Back to Top" button that appears as the user moves down the page. It is built to be lightweight and fully responsive, ensuring a smooth experience on any device.

### What you can customize

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ghwlzhkl-m11jWbd5wsToXKqYlWgQYqBPLVGycz)

**Styles and Layout:** Toggle between a sleek Top Bar, a modern Circular indicator, or a subtle Sidebar Dot. You can also adjust the bar height and button size to fit your design perfectly.**Visuals and Motion:** Fine-tune the animation speed and opacity for a premium feel. You have full control over the color palette, allowing you to create beautiful gradients with two custom color picks.**Navigation Logic:** Choose whether to show or hide the Back to Top button and position it on the left or right side of the screen to stay out of the way of your main content.

### Great for

Long-form blog articles and case studiesLanding pages with multiple sectionsDocumentation sites and help centersPortfolio sites and creative resumesAny content-heavy webpage needing better UX

### Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.

### Need help?

Questions or feedback? Reach me anytime: [**dulajdilshan766@gmail.com**](mailto:dulajdilshan766@gmail.com) or on X @Dulajweb

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

-   All · #11225

## Details

- **Author**: Dulaj Design
- **Price**: $15.00
- **Published**: 2026-05-30
- **Updated**: 2026-08-28
- **Added**: 2026-05-21
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step