jquery - 困惑した。Scroll to Anchor はデスクトップでは機能しますが、iPhone では機能しません

Question

わかった。インラインで表示される 3 つの絶対配置 li a 要素を持つナビゲーションを含む固定位置ヘッダーがあります。タグは、次のスクリプトを起動し、適切なアンカーまでスクロールすることを目的としています。

 <script>
 function goToByScroll(id){
        $('body, html').animate({scrollTop: $(id).position().top},'slow');
 }


 $mainNavLiA.click(function(e) {
       e.preventDefault();
       var $parent = $(this).parent();
       if ($parent.hasClass("active")) {
           return;
       };

       $mainNavLi.removeClass("active");
       $parent.addClass("active");

       var $destination = $(this).attr("href");

       goToByScroll($destination);
  });

  </script>
  <style>


#header-container {
  width: 100%;
  height: 20%;
  min-height: 96px;
  max-height: 130px;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
}
#header-container header {
  width: 100%;
  height: 100%;
  margin: auto;
}
#header-container header nav {
  width: 100%;
  height: 67px;
}
#header-container header nav ul {
  height: 67px;
  width: 100%;
}
#header-container header nav ul li {
  display: inline-block;
  opacity: .75;
 }
#header-container header nav ul li.home {
  width: 27.5625%;
  height: 63px;
  position: absolute;
  left: 0;
  right: 73.125%;
}
#header-container header nav ul li.home a {
  display: block;
  width: 100%;
  height: 100%;
}
#header-container header nav ul li.work {
  width: 28.6875%;
  height: 63px;
  position: absolute;
  left: 29.4375%;
  right: 41.5%;
}
#header-container header nav ul li.work a {
  display: block;
  width: 100%;
  height: 100%;
}
#header-container header nav ul li.contact {
  width: 40.8%;
  height: 63px;
  position: absolute;
  left: 59.6875%;
  right: 0;
}
#header-container header nav ul li.contact a {
  display: block;
  width: 100%;
  height: 100%;
}

</style>

私のデスクトップでは、スクリプトはうまく機能します。ただし、iPhone でテストすると、ページが一番上にある場合にのみスクリプトが起動します。この時点で、私は困惑しています。

余談ですが、IOS の Safari や Chrome のインスペクターに似た「要素の検査」機能を備えたものはありますか?

ありがとう！