1

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)

Scott Schweigert
  • 85
  • 6
  • Could you please add a snippet reproducing the issue? – Kosh Jan 26 '19 at 01:36
  • @KoshVery heres a demo - https://jsfiddle.net/schweigert85/boe3kma4/4/ (wont work in firefox yet) down on the js lines 50 i start the math where I determine what % of the page i've already scrolled, which will determine where the button should send people to next – Scott Schweigert Jan 28 '19 at 18:44
  • 1
    This might be a situation where you need a different approach. SVG could be the answer you're looking for. It is possible to place anchors in svg markup, so I'm wondering if converting your timeline to SVG and then adding targets within for scroll stops might not be a better way... https://alligator.io/svg/hyperlinks-svg/ provides an example. I suspect you'll fight the exact position battle many different ways across platforms and browsers. – J E Carter II Jan 28 '19 at 18:56

0 Answers0