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.
Also Read: 10+ Pure CSS Buttons Examples With Source 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
.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
let get_back_to_top_btn = document.getElementById("btn");
document.getElementById("btn")
:"btn"
.null
if no such element exists.get_back_to_top_btn
:get_back_to_top_btn
.get_back_to_top_btn
holds a reference to the button, allowing us to manipulate it with JavaScript.get_back_to_top_btn.addEventListener("click", () => {
get_back_to_top_btn.addEventListener
:addEventListener
is a method that attaches an event handler to an element."click"
:"click"
specifies the type of event we are interested in. In this case, it’s a mouse click.() => { ... }
:window.scrollTo({ top: 0, behavior: 'smooth' });
window.scrollTo
:{ top: 0, behavior: 'smooth' }
:top: 0
:
0
means the top of the page.behavior: 'smooth'
:
document.getElementById
to find the button with the ID btn
and store it in the variable get_back_to_top_btn
.addEventListener
to attach a function to be executed when the button is clicked.window.scrollTo
to scroll to the top of the page (top: 0
).behavior: 'smooth'
to ensure that the scrolling is smooth and not abrupt.Also Read: Create Download Button With Progress Bar
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
Last Updated: July 4, 2024