アンカーリンクで一瞬表示されるけどすぐ一番上に飛んでしまうときにチェックしたいこと

アンカーリンクでの不具合があったので、そのときの対策をまとめました。あっけなかったけど、メモ程度として。

症状

別ページのアンカーリンクで飛んだ先に、一瞬目的の箇所に移動するが、すぐにそのページの一番上に移動してしまう。

もともと特殊なページのレイアウトで作成していたので、はじめは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スクロールする」っていう風に変更しました。
これで解決!

-WEB