A sticky Back to Top button is a small but powerful feature that enhances user experience on your website. It allows visitors to quickly scroll back to the top of the page with a single click, improving navigation and reducing frustration—especially on long pages.

In this guide, we’ll show you how to add a sticky Back to Top button to your website with simple HTML, CSS, and JavaScript. Plus, we’ve included a video tutorial to make the process even easier!

Why Add a Back to Top Button? ✅

🔹 Improves User Experience – Makes navigation effortless.

🔹 Boosts Engagement – Encourages visitors to explore more content.

🔹 Mobile-Friendly – Helps users on smaller screens scroll up quickly.

🔹 Reduces Bounce Rate – Keeps users engaged instead of leaving out of frustration.

How to Add a Sticky Back to Top Button (Step-by-Step)

Step 1: HTML Structure

Add this button at the bottom of your HTML file (before </body>):

 <button id="backToTopBtn" title="Go to top">↑</button>
Step 2: CSS Styling
Style the button to make it sticky and visually appealing:

#backToTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 50%;
  font-size: 18px;
  transition: opacity 0.3s;
}

#backToTopBtn:hover {
  background-color: #0056b3;
}

Step 3: JavaScript Functionality

Add this script to make the button appear after scrolling:

javascript

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {

    document.getElementById(“backToTopBtn”).style.display = “block”;

  } else {

    document.getElementById(“backToTopBtn”).style.display = “none”;

  }

}

document.getElementById(“backToTopBtn”).addEventListener(“click”, function() {

  window.scrollTo({

    top: 0,

    behavior: “smooth”

  });

});

🎥 Video Tutorial

Watch this step-by-step video guide 

Final Thoughts

Adding a sticky Back to Top button is a simple yet effective way to improve your website’s usability. With just a few lines of code, you can enhance navigation and keep visitors engaged longer.

Try it out today and see the difference! 🚀