scrollTop x % of total

Question

I have a fluid page that is a solid image, set to scale based on the viewport height (im using a jquery library that also translates the width of the page to the height of the page, verticalscroll.js)

css setting the image is

.graphic{
    z-index: 250;
    top:0px;
    width: calc(102vh * 16.77);
    height: 102vh;
    margin-left:-20px;
    background: url(../images/bigguy.svg) no-repeat;
    background-size: 1739vh;
    background-position: 0px;
}

Im trying to make a button that scrolls x percentage, as the image is a timeline, and the events on the image line up to % of scrolling (eg, 1950 is always visible scrolled 8% of the page)

this is the math Im using to move (for instance) to the .08% scroll inside of a click function - but its not scrolling enough

    var scrolling = theHeight * 1.08;
    $('html,body').animate({scrollTop: scrolling}, 800);

instead of scrolling to .08, its only making it to .07

js fiddle - https://jsfiddle.net/schweigert85/boe3kma4/4/ (only works in chrome due do background size svg)