Scroll Progress Button: Premium Navigation Component by Rishika Rai

Marketplace Components Categories Navigation

Scroll Progress Button is a lightweight Framer component that visually indicates how far a user has scrolled on a page. As users scroll, the border of the button fills progressively, showing scroll progress. The button also acts as a smooth scroll-to-top cont

About this Component

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