Fixed
The button stays fixed at the bottom-right of the viewport.
UTILITY-01
Back To Top
The source-backed button is fixed to the bottom-right of long pages and appears after scrolling.
Scroll test
Source back-to-top behaviour
When does it appear?
The source script shows the button once the page scroll position is greater than 520px.
What happens on click?
The source behaviour scrolls the page smoothly back to the top.
Long-page spacer
Enough page height to reveal the control
Round
The source CSS uses a circular navy control with a white arrow.
Responsive
The source CSS scales from 48px desktop to 44px mobile.
Hidden
The button starts hidden with opacity zero and pointer events disabled.
Reveal
The button gains the source `is-visible` state once the scroll threshold is crossed.
Smooth
The click action uses the source smooth scroll behaviour to return to the page top.
Bottom of demo
Scroll back up
The exact source-styled control is active on this page.
Use the fixed circular arrow to return to the top.