Scroll Progress Button

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.

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