Smooth “Back to Top” Button with HTML, CSS, and JavaScript

If your website has long pages or infinite scrolling, giving users a way to quickly return to the top improves usability and user experience. In this tutorial, we’ll create a sleek “Back to Top” button that appears after scrolling down and smoothly animates back to the top of the page when clicked.

HTML Structure

We’ll start with a simple HTML snippet using an SVG icon for the arrow:

<span class="backToTop">
  <svg
    class="bi bi-arrow-up-circle fs-1"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="currentColor"
    viewBox="0 0 16 16"
  >
    <path
      fill-rule="evenodd"
      d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
    ></path>
  </svg>
</span>

• We wrap the SVG icon inside a <span> with the class .backToTop.
• The icon uses Bootstrap Icons, but you can replace it with any arrow icon or even text.

Styling with CSS

We want the button to stay fixed in the bottom-right corner, fade in, and have a smooth hover effect. Here’s the CSS:

.backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 12px;
  color: #fff;
  font-size: 18px;
  opacity: 0;
  transform: translateX(80px);
  transition:
    transform 0.8s ease,
    opacity 0.8s ease;
  z-index: 1000;
}

.backToTop.show {
  opacity: 1;
  transform: translateX(0);
}

.backToTop:hover {
  transform: translateX(0) scale(1.3);
}

Key points:

• .backToTop is initially hidden (opacity: 0 and translated offscreen).
• The .show class reveals the button with a smooth transition.
• Hovering scales the button for a subtle interactive effect.

You can tweak bottom, right, or colors to match your website theme.

JavaScript Functionality

We want two behaviors:

1. Show the button after scrolling past a certain point.
2. Scroll smoothly to the top when clicked.

Here’s the JavaScript:

const backToTop = document.querySelector(".backToTop");

// Scroll smoothly to top on click
backToTop.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

// Show/hide button on scroll
let ticking = false;
window.addEventListener("scroll", () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      backToTop.classList.toggle("show", window.scrollY > 400);
      ticking = false;
    });
    ticking = true;
  }
});

What’s happening here:

• window.scrollY > 400 checks if the user has scrolled more than 400 pixels. Adjust this threshold as needed.
• requestAnimationFrame ensures smooth, performant updates instead of running code on every scroll event.
• Clicking the button triggers window.scrollTo with { behavior: 'smooth' }, giving a nice animation back to the top.

Result

With these three steps:

1. HTML structure with a clickable arrow.
2. CSS animations for smooth entrance and hover effects.
3. JavaScript scroll detection for show/hide behavior and smooth scrolling.

You now have a fully functional Back to Top button that is user-friendly, responsive, and visually appealing.

Extra Tips

• Use a contrast color for the button so it stands out against your content.
• Consider adding a fade-out effect for better aesthetics when the user scrolls back to the top.
• You can make it mobile-friendly by reducing the size or repositioning it for smaller screens.