ページ読み込み時にページ先頭ではなくページ途中の位置で表示問題について

この記事は更新から2年以上経過しています。情報が古い可能性がありますのでご注意下さい。

ページを読み込んだ時に意図した位置で表示させた場合、例えば次のような方法があります。

今回、他人が作った資産を流用して制作していたところ、上記のどちらでもない理由でページが先頭表示されない問題に見舞われ、解決までに数時間を消費してしまいました。

結局、原因はformの入力要素に付与されていたautofocusという属性でした。

この属性があると、ページを読み込んだ時点でフォーカスが移動することにより、その要素が初期表示の画面領域内に無い場合はページスクロールが発生するわけです。

フォーカスが当たった際にテキストカーソルが点滅すれば気付くものでしょうが、私の場合はラジオボタンに指定されており、見た目からは全く気付きませんでした。

個人的には、先頭項目を入力した後に自動でフォーカスが遷移するならともなく、ページ表示時にフォーカスが移動するのはちょっと嫌だなと思います…。