Scroll Progress Top Button
Back-to-top button wrapped in a ring that fills as the visitor scrolls (a conic gradient driven by one custom property, updated on scroll with requestAnimationFrame). Inline mode (default) sits wherever it is dropped; se…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Scroll Progress Top Button reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Element
- Category
- Buttons
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 8
Set on the section, in Bricks’ attributes panel. No code needed.
data-placementinline sits where you drop it (footers, end of articles)
data-sidewhich corner when fixed
data-show-afterpx · scroll distance before the fixed button appears
data-contentarrow icon or the live percentage in the centre
data-stylebutton surface
data-tonecolour of the progress ring
data-sizebutton diameter
data-smoothsmooth scroll back to the top (always instant under prefers-reduced-motion)
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro

Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 page






