Scroll indicator
javascript
Great for long format blog posts, this simple code creates a bar at the bottom of the page that indicates scroll position horizontally.
How this works
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. Copy this code using the copy button on the right.
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>