How to Add a Smooth Scroll-To-Top Button to Your Website

Have you ever scrolled down a long web page and wished for a quick way to jump back to the top? A scroll-to-top button is a simple yet powerful UX feature that improves website navigation. In this tutorial, you’ll learn how to add a smooth scroll-to-top button to your website using just HTML, CSS, and JavaScript.

Why Add a Scroll-To-Top Button?

  • Improves user experience on long pages.
  • Keeps your website looking modern and interactive.
  • Works well for blogs, landing pages, and template-based websites.

Demo Preview

Imagine scrolling down a long blog post and seeing a button at the bottom-right corner. When clicked, the page smoothly scrolls back to the top. That’s exactly what we’re building!

Step 1: HTML Structure

Start with a simple button in your HTML file. Place it just before the closing </body> tag. Here we’ve created a button with the ID scrollToTopBtn.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Scroll-To-Top Button</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div style="height:2000px;">
    <h1>Scroll Down to See the Scroll-To-Top Button</h1>
    <p>Keep scrolling to the bottom of the page...</p>
  </div>

  <!-- Scroll-To-Top Button -->
  <button id="scrollToTopBtn">↑</button>

  <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

Now let’s style the button so it appears fixed at the bottom-right corner. The button is hidden by default and will fade in when the user scrolls down.

/* style.css */
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 12px 16px;
  font-size: 20px;
  border: none;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  display: none; /* hidden by default */
  transition: opacity 0.3s ease-in-out;
}

#scrollToTopBtn:hover {
  background-color: #555;
}

Step 3: JavaScript Functionality

Let’s make the button appear on scroll and smoothly return to the top when clicked.

  • window.scrollY detects how far the user has scrolled.
  • If it’s more than 300px, the button shows up.
  • Clicking the button triggers a smooth scroll animation to the top.
// script.js
const scrollToTopBtn = document.getElementById("scrollToTopBtn");

window.addEventListener("scroll", () => {
  if (window.scrollY > 300) {
    scrollToTopBtn.style.display = "block";
  } else {
    scrollToTopBtn.style.display = "none";
  }
});

scrollToTopBtn.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

Step 4: Try It Out

  1. Copy the HTML, CSS, and JavaScript into your project.
  2. Open it in your browser.
  3. Scroll down the page and test the button, it should scroll smoothly back to the top!

Here’s the full code for the “Smooth Scroll-To-Top Button” tutorial in one complete HTML file. You can copy, paste, and test it directly:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Scroll-To-Top Button</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
    }

    section {
      height: 50vh;
      padding: 40px;
    }

    h1,p {
      text-align: center;
      margin-bottom: 20px;
    }

    /* Scroll-to-top button styling */
    #scrollTopBtn {
      position: fixed;
      bottom: 40px;
      right: 40px;
      background-color: #007BFF;
      color: white;
      border: none;
      outline: none;
      padding: 12px 16px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
      display: none;
      transition: background-color 0.3s, transform 0.3s;
    }

    #scrollTopBtn:hover {
      background-color: #0056b3;
      transform: scale(1.1);
    }
  </style>
</head>

<body>
  <!-- Demo content -->
  <section style="background: #f8f9fa;">
    <h1>Scroll Down to See the Button</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo eros nec urna laoreet, vitae interdum est
      cursus. Integer fringilla, justo at faucibus gravida, orci leo elementum lorem, ac porta erat ligula eu quam.</p>
  </section>
  <section style="background: #e9ecef;">
    <h1>Keep Scrolling...</h1>
    <p>Aliquam erat volutpat. Fusce at purus nec lorem interdum consequat. Cras dignissim, est at laoreet tincidunt, justo
      ligula congue purus, sed blandit sapien sem vel nunc.</p>
  </section>
  <section style="background: #dee2e6;">
    <h1>Almost There!</h1>
    <p>Donec laoreet fringilla nisl, sed viverra enim fermentum nec. Sed pulvinar a sapien et finibus.</p>
  </section>
  <section style="background: #ced4da;">
    <h1>You Made It!</h1>
    <p>Click the button to go back to the top smoothly!</p>
  </section>

  <!-- Scroll-to-top button -->
  <button id="scrollTopBtn" title="Go to top">↑</button>

  <!-- JavaScript -->
  <script>
    const scrollTopBtn = document.getElementById("scrollTopBtn");

    // Show button when user scrolls 100px down
    window.addEventListener("scroll", () => {
      if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        scrollTopBtn.style.display = "block";
      } else {
        scrollTopBtn.style.display = "none";
      }
    });

    // Smooth scroll to top on button click
    scrollTopBtn.addEventListener("click", () => {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    });
  </script>
</body>

</html>

Final Thoughts

That’s it, you’ve built a smooth scroll-to-top button. This small feature makes a big difference in usability, especially on long blog posts, product pages, or portfolios.

If you’re building with Free TemplatesJungle Templates, you can easily add this scroll-to-top feature to any layout. Just paste the button HTML, link your CSS, and add the JavaScript snippet. It works with Bootstrap templates, Tailwind, or plain HTML. Next time you create a template, make sure to include this feature to enhance user experience.

Popular Downloads