経緯
webviewでアプリから目次があるwebページ開いた時に正しく動作しなかったので忘備録。
なんでアンカーリンクが効かないのかは分からないのでわかる方いたら教えてください。
HTML
<h2>目次</h2>
<h3>
<a href='#1'>第一章</a>
</h3>
<ol>
<li>
<a href="#1-1">第1節</a>
</li>
<li>
<a href="#1-2">第2節</a>
</li>
</ol>
<h2><a id="1">第1章</a></h2>
<h3><a id="1-1">第1章 第1節</a></h3>
<h3><a id="1-2">第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()しか動かなかった。