How to Create Reading Scroll Indicator or Progress Bar on WordPress Website?

A reading scroll indicator is a visual cue, typically a bar or line, that indicates the user’s position within a document or webpage. It shows the user how much of the content has been read and how much remains, allowing them to navigate through the content easily. It is often located at the top or bottom of the screen and may be interactive, allowing the user to jump directly to a specific section of the document or webpage.

There are several ways to add a scroll indicator to a WordPress website. Here are a few methods:

1. Use a plugin:

Several scroll indicator plugins are available for WordPress, like “Scroll Progress Bar” or “Page Scroll Indicator”. These plugins can be easily installed and configured to display a scroll indicator on your website.

2. Use a code snippet:

You can also use a code snippet to add a scroll indicator to your WordPress website. You can add this code snippet to the functions.php file of your theme or to a child theme.

Here’s an example of the code snippet you can use to add a scroll indicator:

  function scroll_indicator() {
   echo '<div class="scroll-indicator"></div>';
  }
  add_action( 'wp_footer', 'scroll_indicator' );

3. Use HTML, CSS, and JavaScript:

You can create a reading scroll indicator using HTML, CSS, and JavaScript. You can add the HTML code to your theme’s header.php file, CSS code to style.css file, and JavaScript code to a file called “main.js” in your theme’s js folder.

Step1: Add HTML code (above the head section) in header.php file :

<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>

Step2: Add CSS code in your theme’s style.css file:

/* The progress bar (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

Step3: Add JavaScript code in main.js file:

window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

Whatever approach you choose, test the scroll indicator on different devices and browsers to ensure it is working correctly and is compatible with your website.

Before doing any updates directly on a live website, it’s necessary to ensure that you have a backup of your website.

“Don’t let confusion hold you back from enhancing your website’s user experience. Hire WordPress developers today from Gleexa and let us help you implement a smooth reading scroll indicator on your WordPress website.”