Do you want to create a good-looking and fantastic scroll to top button? Then in this article, we will create an amazing scroll to top button with HTML, CSS & JavaScript. To quickly return to the top of the page, the users can click the “Scroll to Top” button.
Table of Contents
Introduction
The scroll to top functionality is very important as it increases user experience, improves accessibility and mobile responsiveness, saves users time, and reduces user frustration.
Now, let us start creating an amazing scroll to top button with HTML, CSS & JavaScript by following easy-to-follow steps. You can incorporate this design into your website to provide extra navigation facilities.
Watch the full tutorial on YouTube
If you prefer watching video tutorials over reading articles, you can watch a full tutorial on Scroll to Top Button With HTML, CSS & JavaScript on my YouTube channel. If needed, you can access the complete source code here. While you are at it, do subscribe and like the content.
Source code for the Scroll To Top Button with HTML, CSS & JavaScript
Creating the HTML Structure
The first step is to create a file named index.html with the default boilerplate code for the login form design using HTML and CSS. In the head section, include the Font Awesome CDN. Font Awesome is a font and icon toolkit based on CSS.
Create a div with the class name container, which holds multiple paragraph elements and a button element with the type as button and id as btn. Also, it has an on-click attribute, which calls the scroll to the top function when the Font Awesome arrow-up icon is clicked.
Finally, create a script section to handle the scroll-to-top functionality using DOM manipulation. The scrolltoTop function sets the scrollTop attribute of the document element to 0.
Copy and paste the following HTML code into the file named index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Scroll To Top</title>
</head>
<body>
<div class="container">
<h1>Scroll To Top</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsa, ipsam exercitationem consectetur ratione nam modi at earum eveniet inventore dolorum, nostrum eius fuga dolores quo quis dolorem iure voluptas sapiente impedit suscipit possimus. Soluta aperiam quibusdam quis cupiditate, totam numquam? Molestias ipsum eum nisi rerum aliquam dolores ipsa tempore laboriosam itaque minima sequi excepturi officia nulla, fuga eos culpa atque doloremque? Numquam repellat unde doloribus cumque perferendis atque omnis ipsa corrupti vero corporis! Voluptas quam cum iure, harum consequatur rerum ad. Hic sapiente, fugit nemo quam perspiciatis at provident delectus est nam nostrum harum accusamus saepe porro odio deleniti consequuntur cumque totam eaque. Eos dolores optio ex nisi, facilis veritatis rem dolore animi sed repudiandae? Harum modi tenetur atque voluptas! Voluptatem nesciunt rem nihil quod corporis aliquid architecto eum sunt saepe laboriosam aliquam, quae voluptate culpa similique non iusto, pariatur, dolorem incidunt assumenda tempore. Nisi cumque mollitia illum veritatis atque. Facere non officiis hic unde, illum saepe nobis sapiente, dicta aliquid esse, reiciendis nisi praesentium? Accusantium dolor, repudiandae optio beatae harum labore eligendi neque deserunt nemo delectus nisi nostrum nesciunt dicta vero. Odio expedita, neque dolores, fuga voluptatibus exercitationem in impedit nemo corporis dolor voluptates excepturi ex commodi officia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsa, ipsam exercitationem consectetur ratione nam modi at earum eveniet inventore dolorum, nostrum eius fuga dolores quo quis dolorem iure voluptas sapiente impedit suscipit possimus. Soluta aperiam quibusdam quis cupiditate, totam numquam? Molestias ipsum eum nisi rerum aliquam dolores ipsa tempore laboriosam itaque minima sequi excepturi officia nulla, fuga eos culpa atque doloremque? Numquam repellat unde doloribus cumque perferendis atque omnis ipsa corrupti vero corporis! Voluptas quam cum iure, harum consequatur rerum ad. Hic sapiente, fugit nemo quam perspiciatis at provident delectus est nam nostrum harum accusamus saepe porro odio deleniti consequuntur cumque totam eaque. Eos dolores optio ex nisi, facilis veritatis rem dolore animi sed repudiandae? Harum modi tenetur atque voluptas! Voluptatem nesciunt rem nihil quod corporis aliquid architecto eum sunt saepe laboriosam aliquam, quae voluptate culpa similique non iusto, pariatur, dolorem incidunt assumenda tempore. Nisi cumque mollitia illum veritatis atque. Facere non officiis hic unde, illum saepe nobis sapiente, dicta aliquid esse, reiciendis nisi praesentium? Accusantium dolor, repudiandae optio beatae harum labore eligendi neque deserunt nemo delectus nisi nostrum nesciunt dicta vero. Odio expedita, neque dolores, fuga voluptatibus exercitationem in impedit nemo corporis dolor voluptates excepturi ex commodi officia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsa, ipsam exercitationem consectetur ratione nam modi at earum eveniet inventore dolorum, nostrum eius fuga dolores quo quis dolorem iure voluptas sapiente impedit suscipit possimus. Soluta aperiam quibusdam quis cupiditate, totam numquam? Molestias ipsum eum nisi rerum aliquam dolores ipsa tempore laboriosam itaque minima sequi excepturi officia nulla, fuga eos culpa atque doloremque? Numquam repellat unde doloribus cumque perferendis atque omnis ipsa corrupti vero corporis! Voluptas quam cum iure, harum consequatur rerum ad. Hic sapiente, fugit nemo quam perspiciatis at provident delectus est nam nostrum harum accusamus saepe porro odio deleniti consequuntur cumque totam eaque. Eos dolores optio ex nisi, facilis veritatis rem dolore animi sed repudiandae? Harum modi tenetur atque voluptas! Voluptatem nesciunt rem nihil quod corporis aliquid architecto eum sunt saepe laboriosam aliquam, quae voluptate culpa similique non iusto, pariatur, dolorem incidunt assumenda tempore. Nisi cumque mollitia illum veritatis atque. Facere non officiis hic unde, illum saepe nobis sapiente, dicta aliquid esse, reiciendis nisi praesentium? Accusantium dolor, repudiandae optio beatae harum labore eligendi neque deserunt nemo delectus nisi nostrum nesciunt dicta vero. Odio expedita, neque dolores, fuga voluptatibus exercitationem in impedit nemo corporis dolor voluptates excepturi ex commodi officia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsa, ipsam exercitationem consectetur ratione nam modi at earum eveniet inventore dolorum, nostrum eius fuga dolores quo quis dolorem iure voluptas sapiente impedit suscipit possimus. Soluta aperiam quibusdam quis cupiditate, totam numquam? Molestias ipsum eum nisi rerum aliquam dolores ipsa tempore laboriosam itaque minima sequi excepturi officia nulla, fuga eos culpa atque doloremque? Numquam repellat unde doloribus cumque perferendis atque omnis ipsa corrupti vero corporis! Voluptas quam cum iure, harum consequatur rerum ad. Hic sapiente, fugit nemo quam perspiciatis at provident delectus est nam nostrum harum accusamus saepe porro odio deleniti consequuntur cumque totam eaque. Eos dolores optio ex nisi, facilis veritatis rem dolore animi sed repudiandae? Harum modi tenetur atque voluptas! Voluptatem nesciunt rem nihil quod corporis aliquid architecto eum sunt saepe laboriosam aliquam, quae voluptate culpa similique non iusto, pariatur, dolorem incidunt assumenda tempore. Nisi cumque mollitia illum veritatis atque. Facere non officiis hic unde, illum saepe nobis sapiente, dicta aliquid esse, reiciendis nisi praesentium? Accusantium dolor, repudiandae optio beatae harum labore eligendi neque deserunt nemo delectus nisi nostrum nesciunt dicta vero. Odio expedita, neque dolores, fuga voluptatibus exercitationem in impedit nemo corporis dolor voluptates excepturi ex commodi officia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsa, ipsam exercitationem consectetur ratione nam modi at earum eveniet inventore dolorum, nostrum eius fuga dolores quo quis dolorem iure voluptas sapiente impedit suscipit possimus. Soluta aperiam quibusdam quis cupiditate, totam numquam? Molestias ipsum eum nisi rerum aliquam dolores ipsa tempore laboriosam itaque minima sequi excepturi officia nulla, fuga eos culpa atque doloremque? Numquam repellat unde doloribus cumque perferendis atque omnis ipsa corrupti vero corporis! Voluptas quam cum iure, harum consequatur rerum ad. Hic sapiente, fugit nemo quam perspiciatis at provident delectus est nam nostrum harum accusamus saepe porro odio deleniti consequuntur cumque totam eaque. Eos dolores optio ex nisi, facilis veritatis rem dolore animi sed repudiandae? Harum modi tenetur atque voluptas! Voluptatem nesciunt rem nihil quod corporis aliquid architecto eum sunt saepe laboriosam aliquam, quae voluptate culpa similique non iusto, pariatur, dolorem incidunt assumenda tempore. Nisi cumque mollitia illum veritatis atque. Facere non officiis hic unde, illum saepe nobis sapiente, dicta aliquid esse, reiciendis nisi praesentium? Accusantium dolor, repudiandae optio beatae harum labore eligendi neque deserunt nemo delectus nisi nostrum nesciunt dicta vero. Odio expedita, neque dolores, fuga voluptatibus exercitationem in impedit nemo corporis dolor voluptates excepturi ex commodi officia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsa, ipsam exercitationem consectetur ratione nam modi at earum eveniet inventore dolorum, nostrum eius fuga dolores quo quis dolorem iure voluptas sapiente impedit suscipit possimus. Soluta aperiam quibusdam quis cupiditate, totam numquam? Molestias ipsum eum nisi rerum aliquam dolores ipsa tempore laboriosam itaque minima sequi excepturi officia nulla, fuga eos culpa atque doloremque? Numquam repellat unde doloribus cumque perferendis atque omnis ipsa corrupti vero corporis! Voluptas quam cum iure, harum consequatur rerum ad. Hic sapiente, fugit nemo quam perspiciatis at provident delectus est nam nostrum harum accusamus saepe porro odio deleniti consequuntur cumque totam eaque. Eos dolores optio ex nisi, facilis veritatis rem dolore animi sed repudiandae? Harum modi tenetur atque voluptas! Voluptatem nesciunt rem nihil quod corporis aliquid architecto eum sunt saepe laboriosam aliquam, quae voluptate culpa similique non iusto, pariatur, dolorem incidunt assumenda tempore. Nisi cumque mollitia illum veritatis atque. Facere non officiis hic unde, illum saepe nobis sapiente, dicta aliquid esse, reiciendis nisi praesentium? Accusantium dolor, repudiandae optio beatae harum labore eligendi neque deserunt nemo delectus nisi nostrum nesciunt dicta vero. Odio expedita, neque dolores, fuga voluptatibus exercitationem in impedit nemo corporis dolor voluptates excepturi ex commodi officia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsa, ipsam exercitationem consectetur ratione nam modi at earum eveniet inventore dolorum, nostrum eius fuga dolores quo quis dolorem iure voluptas sapiente impedit suscipit possimus. Soluta aperiam quibusdam quis cupiditate, totam numquam? Molestias ipsum eum nisi rerum aliquam dolores ipsa tempore laboriosam itaque minima sequi excepturi officia nulla, fuga eos culpa atque doloremque? Numquam repellat unde doloribus cumque perferendis atque omnis ipsa corrupti vero corporis! Voluptas quam cum iure, harum consequatur rerum ad. Hic sapiente, fugit nemo quam perspiciatis at provident delectus est nam nostrum harum accusamus saepe porro odio deleniti consequuntur cumque totam eaque. Eos dolores optio ex nisi, facilis veritatis rem dolore animi sed repudiandae? Harum modi tenetur atque voluptas! Voluptatem nesciunt rem nihil quod corporis aliquid architecto eum sunt saepe laboriosam aliquam, quae voluptate culpa similique non iusto, pariatur, dolorem incidunt assumenda tempore. Nisi cumque mollitia illum veritatis atque. Facere non officiis hic unde, illum saepe nobis sapiente, dicta aliquid esse, reiciendis nisi praesentium? Accusantium dolor, repudiandae optio beatae harum labore eligendi neque deserunt nemo delectus nisi nostrum nesciunt dicta vero. Odio expedita, neque dolores, fuga voluptatibus exercitationem in impedit nemo corporis dolor voluptates excepturi ex commodi officia.</p>
<button type="button" id="btn" onclick="scrolltoTop()"> <i class="fa fa-arrow-up"></i></button>
</div>
<script>
let button = document.getElementById("btn");
window.onscroll = function(){
if (document.documentElement.scrollTop > 70) {
button.style.display = "block";
} else {
button.style.display = "none";
}
};
function scrolltoTop(){
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>Styling with CSS
For styling, create a new file named style.css and add a style link to the HTML head to link to the CSS file. Remember to follow this step; otherwise, the CSS will not work for any HTML class or element.
Style the html element to have a smooth scroll behavior. The container div is styled to have appropriate padding, and the h1 element is styled to have a font size of 35 pixels with center text alignment and a margin-bottom of 20 pixels.
The paragraph element is styled to have a justified text alignment with a margin-bottom of 20 pixels. The button element is styled to have a fixed positioning with no display, border, or outline, a border radius of 50%, a pointer cursor, and a background of red.
Copy and paste the following CSS code into the file named style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html{
scroll-behavior: smooth;
}
.container{
padding: 30px 80px;
}
.container h1{
text-align: center;
font-size: 35px;
margin-bottom: 20px;
}
.container p{
text-align: justify;
margin-bottom: 20px;
}
.container button{
display: none;
height: 40px;
width: 40px;
position: fixed;
right: 20px;
bottom: 40px;
background: red;
padding: 8px;
border: none;
outline: none;
border-radius: 50%;
cursor: pointer;
}
.container button i{
text-align: center;
font-size: 20px;
color: white;
}Following the above steps, you can easily create an amazing scroll to top button with HTML, CSS & JavaScript. You can access the full source code in the video tutorial by clicking the button below.
Conclusion
Now that you have learned about the scroll to top button with HTML, CSS & JavaScript, please leave your questions in the comment section if you still have any doubts. I will be happy to clarify them as soon as possible.
Must Visit: Perfect Image Slider Using HTML, CSS, and JavaScript
FAQ
What is scrollTop in JavaScript?
The Element.scrollTop property gets or sets the number of pixels that an element’s content is scrolled vertically. An element’s scrollTop value measures the distance from its top to its topmost visible content.
How to scroll automatically to the top of the page using JavaScript?
Create a script section to handle the scroll to top functionality using DOM manipulation. The scrolltoTop function sets the scrollTop attribute of the document element to 0.