What is a Reading Scroll Progress Bar?
Before we dive into the steps, let's understand what a reading scroll progress bar is. This is a visual indicator that appears on your webpage, showing readers how much of the content they've scrolled through. It's a small, unobtrusive bar that sits at the top of the page and gradually fills up as readers scroll down. This not only helps users understand their position in your article but also adds a touch of interactivity to your site.Why Add a Reading Scroll Progress Bar?
Adding a reading scroll progress bar to your WordPress site can offer several benefits:- User Engagement: It keeps your readers engaged by providing a visual cue about their progress in the article.
- Improved Navigation: Readers can easily navigate through long articles, knowing how much content is left to explore.
- Enhanced User Experience: It adds a subtle but effective element to your site, enhancing the overall user experience.
Now, let's get started with the steps to add a reading scroll progress bar without using any plugins:
Step 1: Access Your WordPress Dashboard
Log in to your WordPress dashboard to access the backend of your website. You'll need to make changes to your theme files, so proceed with caution and consider backing up your site before making any modifications.Step 2: Locate Your Theme's Files
In the WordPress dashboard, go to "Appearance" and then click on "Theme Editor." Look for the file named header.php on the right-hand side. This file is responsible for the header section of your website.Step 3: Edit the header.php File
Click on the header.php file to open it for editing. Look for the closing </head> tag in the file. This is where we'll add our code to create the reading scroll progress bar.Step 4: Add the HTML and CSS Code
Paste the following HTML and CSS code just before the closing </head> tag:
HTML
<style>
#scroll-progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #3498db; /* Choose your preferred color */
z-index: 1000;
}
#scroll-progress-bar {
height: 100%;
width: 0;
background-color: #e74c3c; /* Choose a contrasting color */
}
</style>
This code sets up the styling for your reading scroll progress bar. You can customize the colors to match your website's theme by modifying the values after background-color.
Step 5: Add the JavaScript Code
Now, still within the header.php file, add the following JavaScript code just before the closing </head> tag:
HTML
<script>
window.onscroll = function() { updateProgressBar() };
function updateProgressBar() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollProgress = (scrollTop / scrollHeight) * 100;
document.getElementById("scroll-progress-bar").style.width = scrollProgress + "%";
}
</script>
This JavaScript code makes the progress bar dynamic, adjusting its width based on the user's scroll position. It calculates the percentage of the page scrolled and updates the progress bar accordingly.