How To Make Back To Top Button With HTML, CSS & JavaScript

Hey, Frontend web developers. In this post, we will make back to top button with HTML, CSS & JS. When we have too much content to show on the webpage then we can add it back to the top button. Adding the Back top button on the website increases the user experience.

Back To Top Button helps users to quickly reach the top of the navigation menu of the website. In this tutorial, we will cover concepts like how to add smooth scroll behavior & how to use the scroll events with Js.

Key Concepts To Make Back To Top Button

1. CSS Border Radius
2. CSS Positioning
3. JavaScript Scroll Y
4. CSS Scroll Behaviour

Also Read: 10+ Pure CSS Buttons Examples With Source Code

Understanding the HTML Structure Of the Back Top Button

1. At first, we have to create a basic HTML structure. Then we will make a div called container.
2. In the container, we have created two child divisions one for header & another for content. In content, we have placed dummy content.
3. Now we will create a div with id “btn” & class back_to_top for styling. Inside that we will place svg for the back-to-top icon as shown in the following code:

<div class="back_to_top" id="btn">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-760v-80h640v80H160Zm280 640v-408L336-424l-56-56 200-200 200 200-56 56-104-104v408h-80Z"/></svg>
    </div>

Also Read: Make Trash Button With HTML, CSS & Js

Understanding CSS Of Back To Top Button

1. Default Styling: First, we will give RGB(49,48,48) color to the background & set the width to 80% and the margin to the container.
2. Back To Top Button Styling:
   1. Set width to 50px, height to 50px & border-radius to 50% to give a circular effect.
   2. Now we will give the position fixed, from right 20px & from bottom 30px. So that it will be placed at the bottom right.
   3. For aligning SVG at the center of the parent div we will flex ‘.back_to_top’ & align items to the center as shown in the following code:

.back_to_top{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background:  rgb(49, 48, 48);
        border: 2px solid white;
        position: fixed;
        bottom: 30px;
        right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

Also Read: Add To Cart Button With HTML CSS & JavaScript

Understanding Js Of Back To Top Button

1. Getting Reference of the Button Element:

let get_back_to_top_btn = document.getElementById("btn");

1. document.getElementById("btn"):
2. This function searches the HTML document for an element with the ID attribute set to "btn".
3. It returns a reference to that element if found, or null if no such element exists.
4. Assigning to get_back_to_top_btn:
5. The found element (the button) is stored in the variable get_back_to_top_btn.
6. Now, get_back_to_top_btn holds a reference to the button, allowing us to manipulate it with JavaScript.

2. Adding a Click Event Listener:

get_back_to_top_btn.addEventListener("click", () => {

1. get_back_to_top_btn.addEventListener:
2. addEventListener is a method that attaches an event handler to an element.
3. Here, we are attaching a function to be executed when the button is clicked.
4. Event type "click":
5. The first argument "click" specifies the type of event we are interested in. In this case, it’s a mouse click.
6. This means that when the button is clicked, the function provided as the second argument will be called.
7. Arrow Function () => { ... }:
8. The second argument is an arrow function, which is a concise way to write a function in JavaScript.
9. This function will contain the code to be executed when the button is clicked.

3. Scrolling to the Top of the Page

window.scrollTo({ top: 0, behavior: 'smooth' });

1. window.scrollTo:
2. This method scrolls the window to a specific set of coordinates.
3. It takes an object with properties that define the target scroll position and the scrolling behavior.
4. { top: 0, behavior: 'smooth' }:
5. top: 0:
   1. This property specifies the vertical position to scroll to.
   2. 0 means the top of the page.
6. behavior: 'smooth':
   1. This property specifies that the scrolling should be smooth, not instantaneous.
   2. It makes the scrolling action appear gradual and fluid, enhancing user experience.

Summary of Steps

1. Retrieve the Button:

1. We use document.getElementById to find the button with the ID btn and store it in the variable get_back_to_top_btn.

1. Add a Click Event Listener:

1. We use addEventListener to attach a function to be executed when the button is clicked.
2. This function will act as scrolling the page to the top.

1. Scroll to the Top Smoothly:

1. Inside the function, we use window.scrollTo to scroll to the top of the page (top: 0).
2. We specify behavior: 'smooth' to ensure that the scrolling is smooth and not abrupt.

Also Read: Create Download Button With Progress Bar

Full Source Code Of Back To Top Button

HTML:

    <div class="container">
        <div class="header">
            <h1>How To Make Back To Top Button</h1>
        </div>
        <div class="content">
          <p>  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem aut nobis adipisci beatae distinctio saepe repudiandae eaque? Placeat, mollitia dolorem omnis, accusamus delectus recusandae molestias aperiam architecto dolores, voluptates excepturi? Error itaque consequuntur perspiciatis commodi, quas sequi nesciunt quisquam eos laudantium, quam velit, a earum ipsam quidem fugiat mollitia quaerat ab voluptas facere totam possimus quae? Architecto saepe laudantium earum illo qui hic? Iusto numquam magni culpa error alias quam doloremque natus nulla accusantium nemo molestias suscipit quo, quae earum commodi minima autem cupiditate, maiores corporis! Soluta consequatur ipsam porro quam, iusto fuga aperiam commodi, eaque optio magnam illo sit?
        </p>
        <p>  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem aut nobis adipisci beatae distinctio saepe repudiandae eaque? Placeat, mollitia dolorem omnis, accusamus delectus recusandae molestias aperiam architecto dolores, voluptates excepturi? Error itaque consequuntur perspiciatis commodi, quas sequi nesciunt quisquam eos laudantium, quam velit, a earum ipsam quidem fugiat mollitia quaerat ab voluptas facere totam possimus quae? Architecto saepe laudantium earum illo qui hic? Iusto numquam magni culpa error alias quam doloremque natus nulla accusantium nemo molestias suscipit quo, quae earum commodi minima autem cupiditate, maiores corporis! Soluta consequatur ipsam porro quam, iusto fuga aperiam commodi, eaque optio magnam illo sit?
        </p>

        <p>  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem aut nobis adipisci beatae distinctio saepe repudiandae eaque? Placeat, mollitia dolorem omnis, accusamus delectus recusandae molestias aperiam architecto dolores, voluptates excepturi? Error itaque consequuntur perspiciatis commodi, quas sequi nesciunt quisquam eos laudantium, quam velit, a earum ipsam quidem fugiat mollitia quaerat ab voluptas facere totam possimus quae? Architecto saepe laudantium earum illo qui hic? Iusto numquam magni culpa error alias quam doloremque natus nulla accusantium nemo molestias suscipit quo, quae earum commodi minima autem cupiditate, maiores corporis! Soluta consequatur ipsam porro quam, iusto fuga aperiam commodi, eaque optio magnam illo sit?
        </p>
    
    </div>
    </div>
    <div class="back_to_top" id="btn">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-760v-80h640v80H160Zm280 640v-408L336-424l-56-56 200-200 200 200-56 56-104-104v408h-80Z"/></svg>
    </div>    

CSS:

<style>
    body{
        background: rgb(49, 48, 48);
        font-family: 'roboto';
        text-transform: capitalize;
        position: relative;
    }
    .container{
        max-width: 80%;
        margin: 0px auto;
        color: white;
    }
    .header{
        border-bottom: 1px solid white;
    }
    p{
        font-size: 20px;
        line-height: 1.9;
    }
    .back_to_top{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background:  rgb(49, 48, 48);
        border: 2px solid white;
        position: fixed;
        bottom: 30px;
        right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .back_to_top svg{
        width: 30px;
        height: 30px;
    }
</style>

JavaScript:

<script>
    let get_back_to_top_btn = document.getElementById("btn");
    get_back_to_top_btn.addEventListener("click", ()=>{
        window.scrollTo({ top: 0, behavior: 'smooth' });
    })
</script>

Also Read: 3D Hover Button With HTML & CSS

About Author