How to Add Scroll to Top Button on Your Website HTML CSS

Scrolling down a page is a common occurrence on websites. But what if you want to go back to the top of the page? You can create a scroll to top button on your website to make this easy. In this blog post, we’ll show you how to add a scroll to top button on your website in just a few simple steps.

Scrolling through pages of content can be a tedious task, but with the scroll to top button on your website, it can be a breeze. Adding this simple button to your website can make it easier for users to get the information they want faster. In this blog post, we will show you how to add the scroll to top button on your website.

Follow these easy steps to add a Scroll-to-Top or Back to top Button on your Website:

1. First, add the HTML Button code below to your web page, inside the footer area.
2. Add the top button icon using the Font Awesome site kit.
3. Then, add the CSS styling to the main stylesheet of your website.
4. After that, create a new file named scroll.js, and add JavaScript code to it.
5. Link the JavaScript file to the top button page.

Video Tutorial – Adding Back to Top Button in HTML

Watch the video tutorial on how to create ascroll to top button on your website using HTML, CSS, and JavaScript:

Step 1- Add Top Button HTML Code

First, It’s time to get the HTML scroll to top button on your website code. Add this code line on the footer area, where you want to place the back to the top button.

<button onclick="topFunction()" id="myBtn" title="Scroll to Top">
    <!-- font awesome up arrow icon -->
    <i class="fas fa-angle-double-up"></i> 
</button>

Step 2-Top Button Icon Using the Font Awesome site kit

In this step, we are adding the up arrow icon inside the scroll to top button on your website using the font awesome kit.

To use the Free Font Awesome 6 icons, you can sign up for an account at Font Awesome. And get a code (called KIT CODE) to use when you add Font Awesome to get scroll to top button on your website.

I prefer the KIT CODE approach. Once you get the code you can start using Font Awesome on your web pages. Include only one line of HTML code in the header section of the web page.

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

You will get the code to your email like that a076d05399.js and by inserting the script tag, with the code, you can start using Font Awesome icons.

Step 3- Add the CSS styling

After that add the following CSS source code to the main style sheet of your website to style scroll to top button on your website.

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(0, 11, 160, 0.815); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 30px; /* Increase font size */
}
#myBtn:hover {
  background-color: rgb(0, 0, 0); /* Add a dark-grey background on hover */
}

Step 4- Add JavaScript Code

Now, create a new javascript file named scroll.js and add the following code for scroll to top button on your website.

//Get the Top button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
 scrollFunction();
};
function scrollFunction() {
 if (document.body.scrollTop > 20 || document.documentElement.    scrollTop > 20) {
    mybutton.style.display = "block";
 } else {
  mybutton.style.display = "none";
 }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 document.body.scrollTop = 0; // For Safari
 document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

Step 5- Link the JavaScript
Finally, link the JavaScript (scroll.js) file to the web page where you want to place the go to the top button. To link the javascript file to the web page use the following one-line code.

<script src="scroll.js"></script>

Final Words

If you’re looking for a way to improve your website’s user experience, consider adding a scroll to top button on your website.