Top Scroll — Advanced back to top scroll button

Advanced Top Scroll Button is a modern, user-friendly utility for improving navigation and user experience on scroll-heavy pages. It elegantly guides users back to the top with a single click, while offering advanced visual feedback through a built-in scroll progress indicator and optional percentage display.

This component goes beyond basic functionality—it’s designed for full creative control. You can switch between a text-based icon or a custom SVG, control when the button appears, fine-tune colors, radius, shadow, and typography, and even show how far the user has scrolled via animated progress rings or dynamic percentage counters.

⚙️ Key Features

• 🌀 Smooth Scroll Animation – Seamlessly returns to the top with smooth motion.

• 💡 Smart Visibility – Choose between always visible or appear-after-scroll behavior.

• 🎯 Progress Indicator – Displays real-time scroll progress around the button.

• 🔢 Optional Percentage Display – Show exact scroll percentage next to the button.

• 🖼️ Icon Flexibility – Use text or upload your own SVG icon.

• 🎨 Custom Styling – Full control over colors, radius, shadows, and fonts.

• ⚡ Framer-Ready Controls – Fully configurable with intuitive property panels.

💼 Best For

• Long-form content pages or blogs

• Marketing and storytelling websites

• Portfolio or showcase pages with extended scroll

• Landing pages that value intuitive UX navigation

• Any project needing an elegant “back-to-top” interaction