No. 50 of 106
A back-to-top button.
Ten button skins from a clean progress ring to a liquid fill and a rocket that takes off, a reading-progress bar, smart mode that only appears when scrolling up, and smooth eased scrolling to the top or to any section. Scroll down: the ring at the bottom left and the bar at the very top fill as you go.
Every button here works: click one to glide back to the top. The rings fill with your real scroll position.
Progress ringskin = ring
Gradientwith ring
Solidchevron · bounce
Outlinerounded · double chevron
Minimal squarering runs round the edge
Liquid fillwater rises as you scroll
Rocketclick to launch
Pill with textmini progress line
Percentagearrow on hover
Square fillshape = square
Frosted glass lets a gradient or photo shine through; neon glows on dark sites.
Frosted glasson a gradient
Neonglowing ring
Neon %rounded
A “Back to top” in the footer, a docs page that jumps back to its contents, and smart mode for long articles.
106 elements for news, Scroll to Top included.
NewsOn