Question

我正在努力使用JS和JQuery进行移动导航滚动。

我从我的网站中提取了以下脚本，并添加了HMTL元素的简短摘要。

在桌面上（chrome 60.0.3112.113），导航工作正常，两个脚本（scroll（）和islandGo（） - 利用scroll（））正确触发。

使用IOS进行调试时，只有islandGo（）正确触发 - 独立的scroll（）无效。

是否在函数'wrapper'中使用第二个？

如果是这样，那么解决起来似乎相对简单，我只是想知道我是否缺少一些基本原理。

提前致谢

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>

1功能在IOS上正确触发，1无法触发

0 个答案: