How to Make an Unobtrusive Scroll-to-Top Button

The convenient return to the top button helps users quickly return to the top of the page without any effort to scroll. This feature is especially useful for content-rich pages, single-page websites (especially when using unlimited scrolling), and mobile devices of different screen sizes.

These buttons are usually suspended in the bottom corner of the website and click to return to the top of the page. Create easily with JavaScript, but visually inconspicuous while maintaining a large enough click area. Let's take a look at several implementation methods, from simple to complex.

Method 1: Simple implementation

First, use JavaScript to select the button:

 var scrollToTopBtn = document.getElementById("scrollToTopBtn");

document.documentElement returns the root element of the document and is used to get the offset value. Save it in a variable named rootElement to facilitate code calls:

 var rootElement = document.documentElement;

Add a click event listener to the button:

 function scrollToTop() {
  // Return to top logic}

scrollToTopBtn.addEventListener("click", scrollToTop);

In the scrollToTop function, use scrollTo method to scroll to the top of the screen:

 function scrollToTop() {
  // Return to the top logic rootElement.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

Slightly adjust the style:

 #scrollToTopBtn {
  background-color: black;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 16px;
  line-height: 48px;
  width: 48px;
}

Place the button at the bottom of the page (such as the footer):

 <button id="scrollToTopBtn">☝️</button>

The effect is as follows: (The rendering of method 1 should be displayed here)

Method 2: Detect the scroll position

Use the scroll event listener to detect scrolling:

 function handleScroll() {
  // Scroll event handling}
document.addEventListener("scroll", handleScroll);

The handleScroll function will be called every time the user scrolls. We need to get the total number of scrollable pixels:

• scrollHeight returns the element height, including parts that are not visible due to overflow.
• clientHeight returns the height (pixel) of the visible part of the element.

scrollHeight minus clientHeight is the total number of pixels that can be scrolled vertically:

 var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;

scrollTotal variable represents the maximum number of pixels that can be scrolled vertically. Divide the scrolling amount by the total number of scrolled pixels to get a ratio between 0 and 1. With this scale, it is easy to toggle buttons to show/hide.

For example, a return to top button is displayed when the user scrolls to 80% of the total height of the page (the ratio is 0.80). 80% is an arbitrary value, the closer it is to 1, the more the user needs to scroll to see the button.

The JavaScript code is as follows:

 var rootElement = document.documentElement;

function handleScroll() {
  // Scroll event processing var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
  if ((rootElement.scrollTop / scrollTotal) > 0.80) {
    // Show button scrollToTopBtn.classList.add("showBtn");
  } else {
    // Hide button scrollToTopBtn.classList.remove("showBtn");
  }
}

document.addEventListener("scroll", handleScroll);

Some CSS is required to correctly locate the buttons:

 .scrollToTopBtn {
  /* The same common style as before*/

  /* Place it in the lower right corner*/
  position: fixed;
  bottom: 30px;
  right: 30px;

  /* Stay above all other elements*/
  z-index: 100;

  /* Use opacity to hide*/
  opacity: 0;

  /* Add translation effect*/
  transform: translateY(100px);

  /* Add transition effect*/
  transition: all 0.5s ease;
}

.showBtn {
  opacity: 1;
  transform: translateY(0);
}

This way, the button appears when the user scrolls to 80% of the page and hides when it is higher than that.

This looks like a good choice, and adding event listeners is also easy. But performance overhead can be significant because you always check the current scroll position.

There is another way to solve this problem...

Method 3: Intersection Observer

The Intersection Observer API is a great solution. This is a fairly new browser API that allows developers to hand over most of the tasks to the browser for more optimized performance. Travis Almand provides a thorough explanation of how it works. The definition of MDN is as follows:

The Intersection Observer API provides a method to asynchronously observe the cross-changing of the target element with its ancestor element or top-level document window.

Very clever! This means that the button can be used as our target element:

 // Select the element to be positioned var target = document.querySelector("footer");

Then write a callback function that performs operations when the element "intersects" with the window (that is, enters the field of view). The callback function receives an array of entries as an argument.

 function callback(entries, observer) {
  // The callback function will return an array of entries, even if you only observe one item entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Show button scrollToTopBtn.classList.add('showBtn');
    } else {
      // Hide button scrollToTopBtn.classList.remove('showBtn');
    }
  });
}

We need to create a new instance of IntersectionObserver and pass in the callback function we just wrote:

 let observer = new IntersectionObserver(callback);

Finally, we tell the observer to start observing the intersection of the target element selected above with the window:

 observer.observe(target);

How to achieve smooth scrolling?

sure! In fact, Chris showed us how to implement it using CSS in 2019:

 <a href="https://www.php.cn/link/2e6d941e3bc2dbd3f122040f056b6718">Jump to the top of the page</a>

 html {
  scroll-behavior: smooth;
}

There are some subtleties here, such as the accessibility enhancement feature that Chris also introduced in the article. The key is that CSS is getting new features that can complete tasks we used to do with JavaScript.

That's it! Let's start with a very simple idea. We enhance it by showing and hiding buttons based on the user's scrolling position. We then improve performance by implementing the Intersection Observer API instead of monitoring the current scroll position. Finally, we see how to use CSS to achieve smooth scrolling. All in all, we get a return to the top button that is easy to view and use without blocking other elements on the page.

The above is the detailed content of How to Make an Unobtrusive Scroll-to-Top Button. For more information, please follow other related articles on the PHP Chinese website!