HomeCSSScroll To Top Button With Scroll Progress | HTML, CSS & Javascript

Scroll To Top Button With Scroll Progress | HTML, CSS & Javascript

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">&#x1F815;</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!

RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

3 × four =

Most Popular