
アンカーリンクでの不具合があったので、そのときの対策をまとめました。あっけなかったけど、メモ程度として。
症状
別ページのアンカーリンクで飛んだ先に、一瞬目的の箇所に移動するが、すぐにそのページの一番上に移動してしまう。
もともと特殊なページのレイアウトで作成していたので、はじめはDivタグなど囲みをミスっているのかと思っていたけど、そうでもない。
更新(F5やCtrl+F5)でもそのページの一番上に移動してしまうけど、アンカーリンクのURLを直接叩くと目的の箇所に移動する。
原因
悪さしていたのはこいつだった。
<script>
setTimeout(scrollTo, 100, 0, 1);
</script>
スマホで表示したときに1pxスクロールしてURLのバーを消して画面の表示を大きくするjs。
こいつのせいでアンカーリンク先に飛んでも一番上に移動していました。
対策
コードを下記のように書き換えました。
<script>
window.onload = function(){
if(document.body.scrollTop == 0){
setTimeout(function(){scrollTo(0,1)}, 1);
}
};
</script>
「もしスクロールが0であれば、1pxスクロールする」っていう風に変更しました。
これで解決!