JavaScript

3 Simple Steps to Create a “Back to Top” Button Using HTML, CSS and JavaScript

by

Your website’s scroll behavior can have a big impact on your users. If your web page is really long, then a small button can be added to bring the user back to the top quickly to enhance user experience. In this post, we’ll create a “Back to Top” button using HTML, CSS, and JavaScript.

Let’s jump right into it!🚀

To get started, you’ll need to create 3 files, namely index.html, style.css, and script.js in your directory.

HTML Structure for Creating a “Back to Top” Button

To start, let’s write the following code in the index.html file to for create a “Back to Top” Button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Back To Top</title>
  </head>
  <body>
    <button class="backToTop">
      <span>&#11165;</span>
    </button>
    <script src="script.js"></script>
  </body>
</html>

In this HTML structure, I’ve created a button with the class “backToTop” and added an arrow character inside the button using a <span> element. Also, I’ve linked the CSS and JavaScript files to the document.

Output:

Create a "Back to Top" Button using HTML, CSS and JavaScript

But this button is at the top and doesn’t look nice.

So let’s add some CSS to make it visually appealing.

CSS Styling for Creating a “Back to Top” Button

Let’s write the following code in the style.css file. You can customize the styles according to your website’s design.

.backToTop {
  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: #111111;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  transition: all ease-in 0.3s;
}
.backToTop:hover {
  background-color: #fff;
  color: #111111;
  border: 2px solid #111111;
  font-size: 30px;
}

Output:

Create a "Back to Top" Button using HTML, CSS and JavaScript

This CSS style makes our button look good but it doesn’t have any functionality yet.

The button should appear when the user scrolls down, otherwise it should not be displayed.

To do it, add display: none; to your code in the .backToTop style. Now your code should look like this.

.backToTop {
  display: none; /*To hide the button initially*/
  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: #111111;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  transition: all ease-in 0.3s;
}
.backToTop:hover {
  background-color: #fff;
  color: #111111;
  border: 2px solid #111111;
  font-size: 30px;
}

Now, for the last step, add JavaScript code for functionality.

JavaScript Functionality for Creating a “Back to Top” Button

Let’s write the following code to the script.js file.

// Get the button
const backToTopBtn = document.querySelector(".backToTop");

//Listens for the scroll event and shows the button when the user scrolls down by more than 20 pixels.
window.addEventListener("scroll", () => {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
});

// When the button is clicked, it smoothly scrolls the page back to the top.
backToTopBtn.addEventListener("click", () => {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
});

To see it working, add some content to your page. You can add the following content as well.

<div style="height: 2000px; border: 1px solid black">Top of the page.</div>

And here we have a “backToTop” button to enhance user experience.

That’s all for today!

If you’re new to web development, check out Learnify — my curated platform with beginner-friendly tutorials to help you learn web development step-by-step with examples and simple explanations.

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.

Enjoyed reading? You may also find these articles helpful.

3 Steps to Create a Custom Cursor with HTML, CSS and JavaScript

3 Steps to Create a Custom Cursor with HTML, CSS and JavaScript

19 JavaScript One-Liners That’ll Blow Your Mind

19 JavaScript One-Liners That’ll Blow Your Mind

Leave a Comment