Hello everyone, you can learn how to create a Scroll To Top Button using HTML, CSS & JavaScript in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Scroll To Top Button
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
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;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
