Instructions

Display scroll percentage while scrolling

Copy the code below and paste it into the before </body> tag.

<script>

// Replace the this class with the class of the text element where you would like to display the percentage.
let scrollText = document.querySelector('.your-class');

// This function is calculating the percentage of the current position.
function getScrollPercent() {
    var h = document.documentElement,
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}

// This updates the text with the percentage of the function above.
window.addEventListener("scroll", () => {
	let currentScroll = parseInt(getScrollPercent());
	scrollText.textContent = currentScroll;
});

</script>
Copy Code

<script>// Replace the this class with the class of the text element where you would like to display the percentage.
let scrollText = document.querySelector('.your-class');// This function is calculating the percentage of the current position.
function getScrollPercent() {
   var h = document.documentElement,
       b = document.body,
       st = 'scrollTop',
       sh = 'scrollHeight';
   return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}// This updates the text with the percentage of the function above.
window.addEventListener("scroll", () => {
let currentScroll = parseInt(getScrollPercent());
scrollText.textContent = currentScroll;
</script>