在移动设备上点击时页面无法滚动

Question

我的网站上有一个按钮，单击该按钮可向下滚动到下一部分。这适用于台式机，但不适用于ipad或iphone。

我已经尝试了“ touchstart”和“ vclick”事件。我尝试添加cursor：指针。

HTML

<div id="icon-div">
 <button id="icon-about" class="raise">LEARN MORE
 <br>
  <i id="arrow" class="fas fa-arrow-down fa-2x"></i>
 </button>
</div>

JavaScript

$('#icon-about').bind("click", function(event) {
 event.stopPropagation()
 $('html').stop().animate(
  {scrollTop: $('#about').position().top -20
  }, 500, 'swing');
});

“ vclick”完全没有反应。 cursor：pointer没有任何作用。

当我添加一个alert（“”）以测试“ touchstart”时，出现了警告框。所以我知道一个事件被触发了，但是它没有处理滚动代码。