Create a "Back to Top" Button

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

by

Introduction

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

To start, let’s write the following code in the index.html file.

<!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

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

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.

Thanks for reading.

For more content like this click here.

Follow me on X(Twitter) for getting daily tips on web development.

Check out toast.log, a browser extension that lets you see errors, warnings, and logs as they happen on your site — without having to open the browser’s console. Click here to get a 25% discount on toast.log.

Keep Coding!!

Leave a Comment