Hello everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a scroll to the top button. This scroll to the top button also has a circular scroll progress indicator. To build this button, we HTML, CSS and, some Vanilla javascript.
The javascript we will use is pretty simple and absolutely beginner-friendly. I also have a tutorial on the scroll progress indicator bar on my youtube channel. You can check out the tutorial here.
When the user scrolls a certain amount of page, the scroll to top button becomes visible. The percentage of the page that is scroll, is indicated with a circular progress bar around the button. When the user clicks on the button it takes the user back to the very top of the page.
Video Tutorial:
If you prefer to code along to a video tutorial rather than reading the blog post, you can check out the video here down below. Also, don’t forget to subscribe to my youtube channel, where I post web development related tips, tricks and tutorials regularly.
Project Folder Structure:
Before we code, we need to create the project folder structure. The project folder consists of a folder called – Scroll To Top With Scroll Progress.
Inside this folder, we create three files – index.html, style.css and script.js. They are the HTML document, the stylesheet and the javascript file respectively. Now let us begin the coding.
HTML:
We start with HTML. Now copy the code below and paste it into your HTML document. This creates the structure needed to implement the scroll to the top button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll To Top With Scroll Progress</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="progress">
<span id="progress-value">🠕</span>
</div>
<h1>Back To Top Button</h1>
<h3>With Scroll Progress</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam unde
cupiditate nobis incidunt molestias rem aliquam nisi, nihil non eius
blanditiis eveniet veritatis, quam architecto cum quod maiores facere
atque, alias neque minus hic asperiores! Qui, harum iste, optio nam
dolorum molestias impedit ipsum quos non magnam quaerat error
necessitatibus, officiis nostrum minus maiores iusto accusantium sint
atque pariatur. Recusandae facere facilis ab cupiditate reiciendis. Ut
reiciendis iusto non eligendi saepe iure, itaque, odio facere laboriosam
qui voluptatibus id assumenda totam fugit, numquam temporibus ad sint
voluptatum tenetur unde illo. Pariatur nesciunt, perspiciatis rerum
voluptates voluptatum consequuntur placeat autem deserunt.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed
perspiciatis rerum ea quia nostrum, quod sit dolorem, illum officia
inventore, maiores ipsum voluptas aut facere? Quos, autem odit nostrum
ipsam recusandae nulla, labore assumenda voluptatibus quas quisquam
adipisci eveniet illo voluptatem nisi porro, deserunt nemo! Sit reiciendis
unde ab, consequatur excepturi expedita vel tempora mollitia quibusdam
velit earum exercitationem placeat praesentium quo quisquam ipsa voluptate
eum, tempore aperiam corporis. Exercitationem, amet. Amet cum nulla
accusantium modi molestias nesciunt sint soluta, fuga alias doloribus odit
dolor ipsa libero corporis neque adipisci aspernatur quisquam, sit,
officia id harum tenetur ullam beatae!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit est in
minima quos accusamus, id assumenda laborum libero culpa autem corrupti
repellendus voluptatem saepe odit maxime, aut ab fugit voluptas omnis
dolorem voluptate rem velit. Alias quod hic ullam necessitatibus! Tempore
nesciunt tenetur omnis perferendis id beatae non cum porro. Pariatur
facere nesciunt deleniti, laudantium praesentium facilis, minus quo magni
dolorem similique, mollitia quisquam ad voluptatibus iure ullam magnam!
Blanditiis, harum? Eveniet architecto eum velit, quia molestiae accusamus
voluptatem non quis accusantium aspernatur cumque id modi! Aliquam ab
expedita ipsum, libero in quod, sunt mollitia voluptatibus sapiente, dolor
sit delectus?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit molestias
dolorum dolore amet tenetur! At sed nulla sapiente dolorum hic, facere
accusamus officiis placeat commodi molestias, velit dolor ab quibusdam
nostrum numquam optio asperiores impedit perspiciatis consequuntur iusto
laborum deserunt quisquam doloribus! Ducimus explicabo aspernatur sed
dolores perspiciatis, vero tenetur consequuntur culpa dicta numquam facere
labore, deleniti maiores. Fuga id saepe aliquid adipisci iste, beatae
pariatur ullam voluptas accusantium dolor voluptatibus numquam consectetur
asperiores eaque reprehenderit! Maiores, ex consequuntur! Consequuntur
nulla voluptate quaerat accusantium et optio reiciendis id repellendus
possimus, minus dolore? Perferendis labore doloribus iusto nostrum
nesciunt vero commodi cupiditate optio at. Perspiciatis atque inventore,
dolorum iste deserunt, accusantium magnam cum temporibus quae placeat
magni debitis blanditiis reprehenderit tempore a veniam laborum
consectetur amet? Animi cumque nisi aspernatur consequuntur, molestias
vero eaque fuga repellat mollitia assumenda necessitatibus! Suscipit atque
modi quam ab optio. Eum voluptatem, magni deleniti voluptas autem
molestias consectetur totam culpa facilis maiores illum dolore aut! Cumque
quas molestiae dolorem pariatur commodi omnis, ut, iste aliquid illo ipsum
eum culpa laborum doloribus quod. Ad dicta reprehenderit corrupti, soluta
sapiente unde officia blanditiis architecto reiciendis magni sequi.
Repellat ex ab laboriosam, quos error enim ut officiis inventore
accusamus!
</p>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we use CSS to style and position this button. Copy the code provided below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html {
scroll-behavior: smooth;
}
h1 {
background-color: #03cc65;
color: #ffffff;
font-size: 15vmin;
text-align: center;
padding-top: 30px;
}
h3 {
background-color: #03cc65;
color: #001a2e;
font-size: 8vmin;
text-align: center;
}
p {
font-size: 3vmin;
line-height: 2em;
letter-spacing: 0.05em;
text-align: justify;
margin: 50px 0;
padding: 0 30px;
}
#progress {
position: fixed;
bottom: 20px;
right: 10px;
height: 70px;
width: 70px;
display: none;
place-items: center;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
#progress-value {
display: block;
height: calc(100% - 15px);
width: calc(100% - 15px);
background-color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 35px;
color: #001a2e;
}
Javascript:
Finally, we need to implement the functionality. We use javascript to add the logic. Now copy the code below and paste it into your script file.
let calcScrollValue = () => {
let scrollProgress = document.getElementById("progress");
let progressValue = document.getElementById("progress-value");
let pos = document.documentElement.scrollTop;
let calcHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
let scrollValue = Math.round((pos * 100) / calcHeight);
if (pos > 100) {
scrollProgress.style.display = "grid";
} else {
scrollProgress.style.display = "none";
}
scrollProgress.addEventListener("click", () => {
document.documentElement.scrollTop = 0;
});
scrollProgress.style.background = `conic-gradient(#03cc65 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
};
window.onscroll = calcScrollValue;
window.onload = calcScrollValue;
That’s it for this tutorial. I hope you enjoyed this tutorial. If you have issues while creating this button, you can download the source code by clicking on the download code button below. I would love to hear from you guys. So if you have any queries, suggestions or feedback you can drop them in the comments below.
Don’t forget to share this tutorial with your friends if you find it useful. Stay tuned for more such tutorials. Happy Coding!
This was working earlier but not working now
It works perfect, but how to get it to scroll smooth to the top?