Perhaps the easiest way to offer that to the user is a link that targets an ID on the <html>
element. So like…
<html id="top">
<body>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>
But we’ve got a few options here.
If you want it to smooth scroll up to the top, you can do that in CSS if you like:
html {
scroll-behavior: smooth;
}
Note that placing a property on the HTML element like that is all-encompassing behavior you don’t have much control over.
In this case, we aren’t linking to a focusable element either, which means that focus won’t change. That’s probably important, so this would be better:
<html>
<body>
<a id="top"></a>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>
It’s better because the focus will move to that anchor tag, which is good for people using the keyboard or assistive technology.
These require clicks though. You might need to trigger scrolling within JavaScript, in which case:
window.scrollTo(0, 0);
…is a sure bet to scroll the window (or any other element) back to the top. The scrolling behavior of that is determined by CSS as well, but if you aren’t doing that, you can force the smoothness in JavaScript:
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
For a more complete story about smooth scrolling, we have a page for that.
I’d suggest making the top a tag a span. An anchor tag without a href will be flagged by accessibility scanners.
Always wonder why not body, is there some rule against using the body tag here?
IMO “scroll: smooth” usage has gotten out of hand.
Searching through long articles becomes tedious when you’re being forced to wait several seconds for the scroll animation to finish. This issue is compounded on mobile, where the small screen leads to large vertical pages, and negatively affects battery life since the GPU is getting a workout.
This is fantastic and reminds me of why you created css-tricks too. Neat snippets to improve the performance of developers.
I have recently been noticing that mobile needs this at times to bring the user back to the top for further navigation outside of the main architecture that is normally in the footer.
There’s no need to give any element the ID of top. By default all major browsers will default to loading the top of the page by just referring to that ID or just #. E.g.
<a href="#top">
or<a href="#">
Thx Chris !
Just a quick note: be careful with scroll-behavior that is not compatible with iOS Safari :) https://caniuse.com/#search=scroll-behavior
I’ve found back-to-top anchors work even if the ID/class for “top” is not defined. However smooth scrolling does need a target anchor or an element with a “top” defined ID to work. Why this is so I have no idea. Is the “top” already defined in the DOM?
When using this to target a specific part of a page, I guess this doesn’t really work when a website has a fixed navbar, right? The height of the navbar probably won’t be put into consideration when scrolling to a specific target. I mean, the target will be beneath the navbar and thus invisible.