Home > Designing, Others > Need to scroll to the top of the page?

Need to scroll to the top of the page?

September 2nd, 2019 Leave a comment Go to comments

Perhaps the easiest way to offer that to the user is a link that targets an ID on the 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.

The post Need to scroll to the top of the page? appeared first on CSS-Tricks.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.