Reading notes

Scroll down. The Top button appears after about 400px, and it stays out of the Tab order while it is hidden.

Start with the question

Long pages are not a problem on their own. Reference pages, documentation and long articles are meant to be long. The problem starts when the reader has to travel back to the beginning to find the contents or the search box.

Think about which pages really need the button. A short article does not, and a button that appears on every page teaches readers to ignore it.

Why people scroll back up

Most readers go back to the top for one of three reasons: the navigation lives there, they want to check the heading they started from, or they finished and want to start another page. A button helps with all three, as long as it does not get in the way.

Scroll position is also easy to lose. A reader who follows an in-page link and then wants the contents again has no obvious way back, which is the moment a button earns its place.

Keep the button out of the way

A floating control sits on top of content, so it should be small, stay in one corner, and appear only when it is useful. On the first screen it has nothing to do, which is why it stays hidden until the reader has scrolled a little.

A hidden button must stay hidden for everyone. If it only becomes transparent, keyboard users can still land on it and hear a control they cannot see.

Respect the reader's settings

Some people turn on a reduced motion setting because animated scrolling makes them feel unwell. A long smooth scroll back up a tall page is exactly the kind of motion that setting is meant to avoid, so the script checks it before it animates.

The check costs one line, and it matters. Smooth scrolling is a courtesy for people who like it, not a requirement, so the default for everyone else should be an instant jump.

Move focus, not only the page

Scrolling the window to the top is not enough for someone using a keyboard or a screen reader. If focus stays on the button, the next Tab press starts from the bottom of the page again. Moving focus to the heading at the top fixes that.

Focus is part of position. Sighted mouse users see where they are, but a keyboard user only knows by what is focused, so the page and the focus should end up in the same place.

Test it on a real phone

Fixed elements behave differently on phones, where the browser toolbar grows and shrinks while you scroll. Check that the button is not hidden behind the toolbar, and that it is large enough to hit with a thumb.

Also make sure nothing else sits in the same corner. Chat widgets, cookie notices and toasts all compete for it, and the button should move before one of them gets covered.