経緯

webviewでアプリから目次があるwebページ開いた時に正しく動作しなかったので忘備録。
なんでアンカーリンクが効かないのかは分からないのでわかる方いたら教えてください。

HTML

<h2>目次</h2>
<h3>
  <a href='#1'>第一章</a>
</h3>
<ol>
  <li>
    <a href="#1-1">第１節</a>
  </li>
  <li>
    <a href="#1-2">第２節</a>
  </li>
</ol>

<h2><a id="1">第１章</a></h2>
<h3><a id="1-1">第１章 第１節</a></h3>
<h3><a id="1-2">第１章 第２節</a></h3>

webブラウザだと↑だけで正しくアンカーリンク先に遷移するんですが、
webviewだと動かないので、

解決策

const goToAnchor = event => {
  const target = event.target;
  const id = target.getAttribute('href').replace('#', '');
  document.getElementById(id).scrollIntoView();
  event.preventDefault();
};

document.querySelectorAll('a[href]').forEach(element => {
  element.addEventListener('click', goToAnchor);
});

scrollTo()だと動かないので、
scrollIntoView()で

scrollToでいけるかなって思ったやつ

const goToAnchor = event => {
  const target = event.target;
  const id = target.getAttribute('href').replace('#', '');
  const elemY = document.getElementById(id).getBoundingClientRect().top + window.pageYOffset;
  scrollTo({
    top: elemY,
    behavior: 'auto'
  });
  event.preventDefault();
};

document.querySelectorAll('a[href]').forEach(element => {
  element.addEventListener('click', goToAnchor);
});

どっちもwebブラウザ上だと動くんだけど、webviewだとscrollIntoView()しか動かなかった。