Top Scroll
An advanced scroll-to-top button with smooth animation, progress tracking, and customizable style. Perfect for long pages, blogs, and landing sites that value clean, modern UX.
Made with Workshop
Build your own component with AI
An advanced scroll-to-top button with smooth animation, progress tracking, and customizable style. Perfect for long pages, blogs, and landing sites that value clean, modern UX.
Made with Workshop
Build your own component with AI
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.
🌀 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.
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
