【簡単】ブラウザのリロード時にページの一番上から表示する方法【開発者向け】

ホームページを閲覧時にブラウザでページをリロード（更新）したときに、ページの先頭に自動でスクロールさせる方法をご紹介します。

使用する頻度はあまり高くはありませんが、最近パララックスなどトレンド的に縦に長くデザインされたホームページが多くなってきました。
ページのトップ（一番上）から順番に見せたい場合などに利用してみて下さい。

スクリプトを１行追記するだけ

方法は至って簡単でした。
下記のスクリプトをhtmlのheadタグ内に記述するだけです。

<script>
$(function() {
    $('html,body').animate({ scrollTop: 0 }, '1');
});
</script>	

スクリプトを追記したページをブラウザで表示し、少し下にスクロールしてから再読み込み（リロード）をしてみて下さい。
キーボードのショートカットキーは「commad + R」（macの場合）です。
Windowsでは「F5」でしょうか？　（ブラウザのリロードの種類についてはこちらをご覧ください。）

スクリプトで制御され、ページの一番上から表示されるようになりました。

あくまでもユーザー視点で設置のご検討を

そもそも設置に至った経緯は、ページの一番上にスライダーを設置しており、そのスライダーが半分くらい見える位置までスクロールした状態でリロード（更新）した際、スライダーの位置が崩れる不具合が発生しました。
その時にいっそリロードしたらページの一番上から表示するように設定できないか。と調べたのがきっかけです。（結局、スライダーを改良し不具合は解決しました。）

そうです。
これはあくまでも開発者側の勝手な仕様変更です。
ですが、サイトによってはこのような仕様を求められる機会があるのでは、と思いご紹介いたしました。

設置の際は、ユーザーにとってどちらが便利なのか。を考えて設置して下さい。

ご覧いただきありがとうございました。

本格的にhtmlやCSSを学びたいなら、自宅で現役エンジニアから学べるテックアカデミーがオススメ！まずは無料体験！

私も現在phpを勉強中！

daruma108

テックアカデミー公式ホームページへ

※無料体験だけならいっさいお金はかかりません。