Need to scroll to the top of the page?

Need a quick way to return to the top of a long webpage? A simple link targeting a page element ID is often the easiest solution. For example:

<a href="https://www.php.cn/link/2e6d941e3bc2dbd3f122040f056b6718">Back to Top</a>

This assumes you have an element with the ID "top" at the top of your page.

For a smoother scrolling experience, CSS offers a simple solution:

html {
  scroll-behavior: smooth;
}

However, this affects all scrolling on the page and lacks granular control. It also doesn't change focus, which can be problematic for keyboard or assistive technology users. A better approach is to combine the link with a focusable element:

<a href="https://www.php.cn/link/2e6d941e3bc2dbd3f122040f056b6718" tabindex="0">Back to Top</a>

The tabindex="0" attribute makes the link focusable.

Alternatively, you can use JavaScript for more precise control. The simplest method is:

window.scrollTo(0, 0);

This instantly scrolls to the top. For smooth scrolling in JavaScript:

window.scroll({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

This provides a smoother transition. Remember that the actual smoothness is still influenced by CSS scroll-behavior. For a more in-depth discussion of smooth scrolling techniques, please refer to [link to a more detailed resource on smooth scrolling - replace bracketed information with actual link].

The above is the detailed content of Need to scroll to the top of the page?. For more information, please follow other related articles on the PHP Chinese website!