Cross-Browser Method to Determine Vertical Scroll Percentage in JavaScript

Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript

Oct 2016: Fixed. Parentheses in jsbin demo were missing from answer. Oops.

Chrome, Firefox, IE9+. Live Demo on jsbin

var h = document.documentElement, 
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';

var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;

As function:

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;
}

If you prefer jQuery (original answer):

$(window).on('scroll', function(){  var s = $(window).scrollTop(),      d = $(document).height(),      c = $(window).height();
  var scrollPercent = (s / (d - c)) * 100;    console.clear();  console.log(scrollPercent);})

html{ height:100%; }body{ height:300%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Get percentage of scroll position

Returns a number between 0 to 100 relative to scroll position:

document.onscroll = function(){ 
  var pos = getVerticalScrollPercentage(document.body)
  document.body.innerHTML = "<span>" + Math.round(pos) + "%<span>"
}

function getVerticalScrollPercentage( elm ){
  var p = elm.parentNode
  return (elm.scrollTop || p.scrollTop) / (p.scrollHeight - p.clientHeight ) * 100
}

body{ height:2000px }
span{ position:fixed; font:5em Arial; color:salmon; }

Get scroll percentage between 0 and 1 when scrolling

To achieve 0 in a division, you need to left side of the operator to be equal to 0 (0 divided by anything is always 0). In your case, it is always equal to something higher than 0 since you are doing an addition of a number always larger than 0 and another one that is >= than 0.

Try dividing the scroll position with the document height minus the window scroll:

document.addEventListener('scroll', setBackgroundColor)
function setBackgroundColor() {  let offset = window.scrollY / (document.body.offsetHeight - window.innerHeight)  console.log(offset, window.innerHeight + window.scrollY, document.body.offsetHeight)}

html,body {  margin: 0;  padding: 0;  height: 500vh;}

Scroll by given vertical scroll percentage in JavaScript

Get the total height of the document, work out the percentage you need in px then apply that to window.scrollTo(). Try this:

var scrollYPercent = 0.25;var scrollYPx = document.documentElement.scrollHeight * scrollYPercent;window.scrollTo(0, scrollYPx);

html, body { height: 1000px; }p { margin-top: 400px; }

<p>Note the scroll position -></p>

How can I get the scrollbar position with JavaScript?

You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.

---

Related Topics