Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageScroll 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
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
- Etch, ACSS, plain CSS
Options 8
Set on the section, in Etch’s 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)
Free pattern. Yours to use on any site, no plan needed.
Included in Pro From €39 a year, with all 469 patterns.
Get Pro
