📜 Scroll Indicator
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
This code display a full width bar at the bottom of the page. This horizontal bar will have an overlay that indicates how far down the page you have scrolled. Using the CSS part of this code, you can change the width, color, and placement.
How to use this code
This code is designed to work on any page of your site, and it’s ideal for long format blog content. It’s recommended that you add it as a code block.
<script>
function updateProgressBar() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progressBar").style.width = scrolled + "%";
}
window.addEventListener('scroll', updateProgressBar);
</script>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<style>
.progress-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: yellow;
z-index: 9999999;
}
.progress-bar {
height: 10px;
background: #000;
width: 0%;
transition: width 0.3s ease;
}
</style>