Adding a Page Scroll Indicator to an HTML page.

Scroll indicators serve as a visual aid for website visitors, helping them understand how far they've scrolled through your content. In this tutorial, we'll walk you through the process of creating a JavaScript scroll indicator from the ground up. We'll explore HTML, CSS, and JavaScript, explaining each step in detail.

HTML Structure

Our journey begins with the HTML structure of our webpage. To set the stage, we'll create a container div to hold both our website's content and the scroll indicator itself.

<!DOCTYPE html>
<html>
    <head>
        <title>Js Page Scroll Indicator</title>
    </head>
    <body>
        <div class="container">
          <!-- Your website content goes here -->
          <div class="scroll-indicator" id="scroll-indicator"></div>
        </div>
    </body>
</html>

This, of course, is a simple structure of the important elements required to display the scroll indicator.

Container (<div class="container">): This div acts as a wrapper for your website's content. It ensures that the content and scroll indicator align correctly.
Scroll Indicator (<div class="scroll-indicator" id="scroll-indicator">): This div represents our scroll indicator. I've given it the class "scroll-indicator" and an id of "scroll-indicator" for styling and JavaScript interaction.

CSS Styling

Now, let's style our scroll indicator using CSS. We'll explain the CSS properties and their purposes in the code:

.container {
  position: relative;
  width: 100%;
}

.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px; /* Height of the scroll indicator */
  background-color: #e715e7; /* Adjust the color to your liking */
  width: 0;
  transition: width 0.3s; /* Smooth width transition */
}

Position (position: relative and position: fixed): The "container" div is set to "relative" positioning, which means it will respect the flow of the page. The "scroll-indicator" div, on the other hand, uses "fixed" positioning, ensuring it stays fixed at the top (top: 0;) of the viewport as the user scrolls.
Height and Width: We define the height and initial width of the scroll indicator. The height determines how thick the indicator bar appears, while the width starts at 0 and will grow as the user scrolls.
Background Color: You can customize the background color of the scroll indicator to match your website's theme. In this example, it's set to a purple shade (#e715e7).
Transition: This CSS property adds a smooth transition effect to the scroll indicator's width. When the width changes, it animates over a duration of 0.3 seconds, creating a visually pleasing effect.

JavaScript Functionality

Now, let's add the JavaScript code that makes our scroll indicator interactive:

window.onscroll = function() {
  const scrollIndicator = document.getElementById("scroll-indicator");
  const scrollPosition = window.scrollY;
  const windowHeight = window.innerHeight;
  const pageHeight = document.body.clientHeight;

  const scrollPercentage = (scrollPosition / (pageHeight - windowHeight)) * 100;
  scrollIndicator.style.width = scrollPercentage + "%";
};

Let's break down the JavaScript:

window.onscroll Event: This event listener triggers whenever the user scrolls the webpage.
getElementById("scroll-indicator"): We use this function to select our scroll indicator element by its unique ID, "scroll-indicator."
Scroll Position: scrollPosition stores the current vertical scroll position in pixels.
Window and Page Heights: windowHeight represents the height of the user's viewport (what they can see), and pageHeight is the total height of the webpage's content.
Scroll Percentage: We calculate the scroll percentage by dividing scrollPosition by the difference between pageHeight and windowHeight. This gives us a value between 0% and 100%.
Updating Width: Finally, we update the width of the scroll indicator based on the calculated percentage. As the user scrolls, the indicator's width expands, providing a visual representation of their progress.

Example

https://codepen.io/theadeyemiolayinka/pen/poqaVxV

Conclusion

In this comprehensive tutorial, we've covered every aspect of creating a JavaScript scroll indicator for your website. We started with the HTML structure, explained the CSS styling, and detailed the JavaScript functionality. By following these steps, you can enhance the user experience on your website and add a visually engaging element to your pages.

Don't hesitate to customize the styles to match your website's theme and branding. Remember, web development is not just about code; it's also about creativity. So, go ahead, make it your own, and happy coding!

This brings us to the end of our tutorial on creating a JavaScript scroll indicator. I hope you found it informative and enjoyable. If you have any questions or want to explore more web development topics, please feel free to reach out. Thanks for reading!

The Sage Chronicles