EspañolBack to top button
Choose the side, the colors and how far down it appears. Scroll the preview to see the button show up.
How to useBack to top button
Available in: 
Back to top button: what it is for
On long pages, a back-to-top button saves people from scrolling all the way back up, especially on phones.
Choose the side, the colors, the size, the shape, the distance from the edge and how far down it appears. The code uses a real button with a label, appears with a short transition, scrolls smoothly only for people who did not ask for less motion, keeps the hidden button from receiving focus and moves focus to the start of the page.
How to use
- Choose the side, colors and size.
- Set the distance and when it appears.
- Copy the code and paste it before the end of the body.
When to use it
- Blogs and long articles.
- Stores with long product lists.
- Menus and catalogs.
Frequently asked questions
When does the button appear?
After the visitor scrolls past the height you choose (one screen by default). On short pages it never appears, which avoids a useless button covering the content.
Will it get in the way of the WhatsApp button?
They can share a corner. Put the back-to-top button on the other side or increase the distance from the bottom so one does not cover the other on phones.
Why does focus move to the top?
People who browse with a keyboard or screen reader should continue from the start of the page after tapping the button. The code moves focus to the first element, in addition to scrolling the screen.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.