In this tutorial, we explain to you the simple steps on how you can add a Scroll-to-Top button in your website. Such an input will help greatly in the user experience, just in case users want to scroll back to the top of your page because they scrolled down very far on a long page.

This feature is quite fun and adds a little bit of modernity to your website! Let’s create it with clean code snippets using HTML, CSS, and JavaScript.

Why Add a Scroll-to-Top Button?

Well, it is obvious; convenience and easier navigation. The button ensures that the readers won’t have to scroll back to the top of the page to read more after reading long content. This little addition can make big differences in usability, especially for mobile users.

Here’s What We’ll Cover:

The HTML Structure
Styling the Button with CSS
Adding JavaScript to Trigger the Scroll
Making It Interactive and Smooth
Final Touches: Hover Effects and Animation
Responsive Design Considerations
SEO Benefits of Scroll-to-Top Buttons

Let’s jump right into the fun stuff!

1. The HTML Structure

We’ll begin by adding the basic HTML structure. It’s very minimal—just a button that sits at the bottom-right corner of your page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll-to-Top Button</title>
</head>
<body>
  <h1>Scroll Down the Page</h1>
  <p>Scroll down to see the scroll-to-top button in action.</p>

  <!-- Scroll-to-top button -->
  <button id="scrollToTopBtn">&#8593;</button>

</body>
</html>

Key Takeaways:

The button is represented by an arrow (↑), symbolizing the upward scroll action.
The button is empty for now, but we will style it next.

2. Styling the Button with CSS

This is where we’ll give life to the button by styling it with CSS. We’ll make sure it’s eye-catching and positioned correctly.

/* General page styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 2000px; /* Making the page long enough to scroll */
  background-color: #f0f0f0;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: #333;
}

p {
  max-width: 600px;
  margin: 20px auto;
  font-size: 18px;
  line-height: 1.6;
  color: #666;
}

/* Scroll-to-top button styling */
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#scrollToTopBtn:hover {
  background-color: #ff4747;
  transform: translateY(-5px);
}

#scrollToTopBtn.show {
  display: flex;
}

The Scroll-To-Top Buttons look:

Key Takeaways:

The button has a fixed position at the bottom-right corner.
The button is round with a soft shadow for depth.
We used transition to add smooth hover effects.

3. Adding JavaScript to Trigger the Scroll

Now, we’ll add some JavaScript magic to make the button appear and scroll the page back to the top when clicked.

// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");

// Function to show or hide the button based on scroll position
window.onscroll = function() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    scrollToTopBtn.classList.add('show');
  } else {
    scrollToTopBtn.classList.remove('show');
  }
};

// Function to smoothly scroll back to the top
scrollToTopBtn.addEventListener("click", function() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

Key Takeaways:

onscroll event checks if the page is scrolled down 100px or more.
The button appears only after scrolling past 100px, ensuring it doesn’t clutter the page unnecessarily.
When the button is clicked, it scrolls to the top smoothly using scrollTo({ behavior: "smooth" }).

Also Read:

4. Making It Interactive and Smooth

This is another vital point you wouldn’t want to miss: you don’t want the scrolling to be jumpy. This slight modification makes all the difference and offers a seamless experience to the user. We already have used behavior: "smooth" in our JavaScript code for this purpose. No jumpy scrolls here!

5. Final Touches: Hover Effects and Animation

Remember how we added the hover effect in the CSS? This one gives the button just a little “bounce” when hovered over, making it more interactive and fun.

6. Responsive Design Considerations

You should ensure that your Scroll-to-Top button should look good on all devices, especially mobile. Our design so far should fit most screens, but don’t forget to test it on a number of them.

7. SEO Benefits of Scroll-to-Top Buttons

You will not get any direct SEO benefit from including a Scroll-to-Top button, but you are absolutely helping the UX. This inherently means that your engagement metrics will be better(like lower bounce rates). You’ll receive some indirect SEO help from Google; they love smooth navigation.

Video Tutorial:

Did you think I had ended the post without giving you a video tutorial? If you have thought that, then you are wrong. Here is the video tutorial. Go and learn.

Smooth Scroll-to-Top Button Tutorial | Add a Scroll Back to Top Button with HTML, CSS & JavaScript

Conclusion

Adding a Scroll-to-Top button is a simple yet powerful way to improve your website’s user experience. It’s lightweight, looks great, and is super easy to implement. Plus, your visitors will appreciate the convenience!