A sleek, animated progress button for Framer that tracks scroll position and provides smooth one-click navigation back to the top. Fully customizable and easy to implement.
Make it with Workshop
Build your own component with AI
Elevate your Framer website with this beautifully crafted Scroll Progress Button. This component solves two key UX problems elegantly: it visually indicates how far users have scrolled through your content, and it provides a convenient, animated button to smoothly return to the top.
Visual Scroll Tracking: Dynamic circular progress bar fills as users scroll
Smooth Scroll-to-Top: One click returns users to the top with buttery smooth animation
Fully Customizable: Control colors, sizes, and animation speeds directly in Framer's property panel
Micro-Interactions: Includes hover scale effects, tap animations, and bouncing arrow icon
Professional & Polished: Perfect for long-form content, portfolios, and documentation sites
Zero Code Required: Simply drop into your Framer project and customize visually
Portfolio websites
Long-read articles and blogs
Documentation sites
E-commerce product pages
Landing pages with multiple sections
Button Size (40-100px)
Progress Stroke Color & Width
Background Color
Arrow Icon Color
Bounce Animation Speed
No coding skills required – just drag, drop, and customize. Works seamlessly in both Framer Preview and Published websites.
All sales are final due to the nature of digital products. Please review all details before purchasing.
Free lifetime updates & email support.Questions? Reach out via email amiopial017@gmail.com or on LinkedIn.
Need help setting up your website or integrating this component?Reach out and we’ll help get it running perfectly in your Framer project.