Percentage the user has scrolled down the page Javascript

Get the percentage that the user has scrolled down the page with JavaScript!

by William Green

HTML

<div id="horizontalMover"></div>

CSS

#horizontalMover {
    background-color:#123456;
    width:0%;
    height:10%;
    height:10vh;
    position:fixed;
}

html,body{
    padding:0;
    margin:0;
}

/*add extra height*/
html {
    height:5483px;
}
body{
    height:100%;
}

JavaScript

window.onload = function(){
    var documentScrollTop = document.documentElement.scrollTop;
    	var totalDocumentHeight = document.documentElement.offsetHeight;
    
   	window.onresize = function(){
    	resetScrollingVariables();
    };
    
    
	window.onscroll = function(){
    	resetScrollingVariables();
    };
    
    function resetScrollingVariables(){
     	documentScrollTop = document.body.scrollTop;
        //remember to subtract the height of the viewport for accurate results
    	totalDocumentHeight = document.documentElement.offsetHeight-window.innerHeight;
        document.getElementById('horizontalMover').style.width = returnPercentageScrolled()+'%';
        
    }
    
    function returnPercentageScrolled(){
     	var percentageScrolled = documentScrollTop/totalDocumentHeight;
        //multiply to get it to a percentage
        //alert(document.body.scrollTop+' scroll top');
        return percentageScrolled*100;
    }
};