Website with scroll indicator looks cool. And it’s really a good idea to keep scroll indicator in the website. In this tutorial, I’ll show you the easiest way to place scroll indicator on your HTML template.

For this, you must have HTML, CSS and basics JavaScript knowledge to understand how the codes work.

If you are not familiar with JavaScript, then it is OK, I will also provide you the source code down below.

Methods to create a Scroll Indicator

Step 1 : Add HTML

<div class="header">
    <div class="scroll-wrapper">
        <div id="scrollIndicator"></div>
    </div>
</div>
<div class="content-area">
    Place multiple content here, either paragraphs or any thing else.
</div>

Step 2: Add CSS

/* Place header at the top and always fit to the size of device */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background: #555;
  z-index: 9999;
}

/* Indicator Wrapper */
.scroll-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #fff;
}

/* Progress Indicator - Initial Width to 0%; */
#scrollIndicator {
  width: 0%;
  height: 4px;
  background: #cc4551;
}

Step 3 : Add JavaScript

// When user scrolls, width of the Scroll Indicator Increase on scroll down and decrease on Scroll Up
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("scrollIndicator").style.width = scrolled + "%";
}

The Sum Up

We can also create scroll indicator by using jQuery library, but I prefer using Vanilla js over jQuery for small projects.

If this tutorial helped you, then please don’t forget to leave a comment down below and share this content to your friends as well. Keep Learning … !! See you in the next how to tutorials.

Sakar Aryal is a Computer Application student from beautiful town Tilottama, Nepal. He loves coding and blogging. He provides problem solving technique specially related to WordPress, HTML, CSS, php and more other web and tech related things through on his blog , blogietech.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.