OneTaskBy Tim King · Updated
Back to Top Button Generator
Scroll to Top with Progress Ring
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Back to Top Button works
A back to top button sits in the corner of a long page and takes the visitor back to the start in one click. This back to top button generator makes one that fades in after scrolling, can fill a progress ring as they read, and comes as a circle, square or labelled pill.
On long articles, documentation and product listings, returning to the navigation means a lot of scrolling, especially on a phone. A small fixed button in the corner saves that effort without taking space from the content.
How the back to top button works
One passive scroll listener shows the button once the page has scrolled past your chosen distance
and, if the ring is on, sets a --progress custom property from 0 to 1. The ring is a
conic-gradient painted on the border box behind a solid padding box, so it works for every shape
without SVG. Clicking calls window.scrollTo({ top: 0 }), and the smooth glide comes from CSS
scroll-behavior, which is only turned on for visitors who have not asked for reduced motion.
Accessibility
It is a real <button>, so it works with the keyboard and has a visible focus ring. Icon-only
shapes carry an aria-label, and the pill shows the same text on screen. The position respects the
safe-area insets so it clears the home bar on newer phones.
FAQ
Should a back to top button be a link or a button?
A link to #top works without JavaScript and is a fine choice. A button suits this version because
it runs a script action and is hidden until needed. If you use a link, make sure the target id exists
at the top of the page.
When should the button appear?
After roughly one screen of scrolling, which is why the default is 300 pixels. Showing it at the top of the page is pointless, and waiting too long means people have already scrolled back by hand. Try 600 or more for very long pages.
Can it cover content or other buttons?
It can, especially cookie banners, chat widgets and floating action buttons in the same corner.
Change right and bottom, or move one of them to the left side. On phones, keep it clear of
bottom navigation bars.
Does the progress ring hurt performance?
No. The scroll listener is passive, and it only sets one custom property and toggles one class. Repainting a small gradient on one button is very cheap.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Sticky Header
Build a sticky header that hides, shrinks or stays as the page scrolls.
Scrollspy Navigation
Build a nav that highlights the section currently on screen.
Reading Progress Bar
Make a scroll progress bar for articles and copy the CSS and JS.
Cookie Banner
Build a lightweight cookie consent banner with Accept and Reject buttons.
Bottom Sheet
Build a slide-up bottom sheet with actions and swipe to close.