Back to Top

What is a back to top button?

A back to top button is a small control, usually fixed in a lower corner of the screen, that scrolls the page back to the start. It typically appears after the user has scrolled a certain distance and may show an arrow icon, a label or a circular scroll-progress indicator. You see it on long articles, documentation, product listings and one-page websites.

When to use a scroll to top button

Add one when pages are long enough that scrolling back up becomes tedious, especially on mobile. On short pages it is just clutter. It works best alongside a sticky header or a table of contents, not as a replacement for good navigation.

Best practices for a back to top button:

• Use a real <button> or a link to #top so it works with the keyboard, and give it an accessible name such as aria-label="Back to top" when it only shows an icon.
• After scrolling, move focus to the top of the page or the main heading so keyboard users continue from there.
• Use scroll-behavior: smooth or window.scrollTo({ top: 0, behavior: "smooth" }), but switch to instant scrolling when prefers-reduced-motion is set.
• Show and hide it with an IntersectionObserver or a throttled scroll listener to keep scrolling smooth.
• Keep it at least 44 by 44 pixels and away from other floating elements such as chat bubbles or cookie bars.
• Ensure enough contrast against both light and dark sections it may overlap.

Bootstrap, Tailwind CSS and pure CSS versions

Each back to top button has a live preview, code tabs and a copy button. Bootstrap 6 versions use the new alpha ES module build and theme-* colour roles, Bootstrap 5 versions use buttons and position utilities, Tailwind CSS versions use utility classes, and pure CSS versions keep it lightweight with optional vanilla JS. Pick your framework with the filter, copy or download the snippet and change the icon, offset and colours.