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

Create Scroll to Top Button for your website
Create Scroll to Top Button for your website
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

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 for 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, 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.

What is Scroll to Top/ Go to Top Button on the Website?

Scrolling to the top button is really helpful for long web pages or blog posts. When visitors click on it the web page suddenly auto-scroll to the top of the web page. Scroll to the top button located at the corner of a webpage. By clicking on the button the page will quickly scroll to the top page. It makes your website more user-friendly and interactive for visitors.

How to add a top button to my 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.

How to add a Scroll to Top button in HTML CSS?

Scrolling through long pages can be a real pain, but adding a scroll to top button can make it a lot easier.
This simple tweak can make your website a lot more user-friendly, and it’s easy to do yourself.

Step 1- Add Top Button HTML Code

First of all, It’s time to get the HTML scroll to the top button 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 top button using the font awesome kit. Watch the below video tutorial and learn how to use font awesome icons kit on your website.

Recommended for You!

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 your web page.

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.

#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 to it.

//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 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. This simple yet effective feature can help your visitors navigate your site more easily and quickly. We’ve provided a few steps below on how to add this feature in HTML CSS so you don’t have to spend time figuring it out on your own.

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

Leave a Reply

Your email address will not be published.