NickName:DJaMCo Ask DateTime:2017-09-05T20:33:14

1 function correctly firing on IOS, 1 not firing

I am struggling with mobile navigation using JS and JQuery to scroll.

I have extracted the following scripts from my site and added a brief summary of the HMTL elements.

On Desktop (chrome 60.0.3112.113) the Nav works ok and both scripts (scroll() and islandGo() - which utilises scroll()) correctly fire.

When using IOS to debug, only the islandGo() fires correctly - with the standalone scroll() not working.

Is it to do with the second being within a function 'wrapper'?

If so, then it seems relatively simple to solve, I'm just wondering if I am missing some fundamentals.

Thanks in advance

function scroll(cli) {
    "use strict";
    var target = '#'.concat(cli);
    console.log(target);
    $("html, body").animate({scrollTop: $(target).position().top - 90}, 500);
}

function island(d) {
    "use strict";
    document.cookie = "location=" + d + ";path=/;expires=1";
}

function islandGo(z) {
    "use strict";
    island(z);
    scroll('mainblock');
    console.log("Location = " + z);
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<a id="navLink-l1" title="Island" class="location-content" onmouseup="javascript:islandGo('island')" style="position: relative; display: inline-block; cursor: pointer; z-index: 5; text-decoration: none; width: 200px; height: 200px;">
  <div id="content-l1-div" class="position: relative; margin: 0px auto; text-align: center; width: 100%; height: 100%">
    <span>
      ISLAND
    </span>
  </div>
</a>

<a id="navLink-l2" title="OTHER" class="body-content" onmouseup="javascript:scroll('other-content')" style="position: relative; display: inline-block; cursor: pointer; z-index: 5; text-decoration: none; width: 200px; height: 200px;">
  <div id="content-l1-div" class="position: relative; margin: 0px auto; text-align: center; width: 100%; height: 100%">
    <span>
      OTHER
    </span>
  </div>
</a>

<div id="page-spacer" style="position: relative; width: 100%; height: 1000px; background: transparent;"></div>

<div id="mainblock" style="position: relative; width: 100%; height: 500px; background: blue; padding: 200px;">
  CONTENT
</div>

<div id="page-spacer" style="position: relative; width: 100%; height: 1000px; background: transparent;"></div>

<div id="other-content" style="position: relative; width: 100%; height: 500px; background: blue; padding: 200px;">
  !! OTHER CONTENT
</div>

Copyright Notice：Content Author:「DJaMCo」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/46055094/1-function-correctly-firing-on-ios-1-not-firing