ホームページを見ている時に、ブラウザのリロード（更新）でページの先頭に自動でスクロールさせる方法をご紹介します。
ページの１番上のコンテンツを見せたい時や、上から順番に見せたい時などにご利用ください。
関連記事ブラウザの再読み込みの方法３種類
関連記事レスポンシブサイトでjavascriptを分岐させる方法
ページのリロード時に一番上から表示する方法
ランディングページやパララックスデザインのサイトなどで、縦に長いホームページが多くなってきました。
そんな時にページのリロード（再読み込み）時に、一番上から表示する方法をご紹介します。
スクリプトを１行追記するだけ
方法は、いたって簡単です。
下記のスクリプトをhtmlのheadタグ内に記述するだけです。
<script>
$(function() {
$('html,body').animate({ scrollTop: 0 }, '1');
});
</script> スクリプトを追記したページをブラウザで表示し、少し下にスクロールしてから再読み込み（リロード）をしてみて下さい。
スクリプトで制御され、ページの一番上から表示されるようになりました。
リロード：Windowsの場合
- キーボードの「F5」ボタン
- または「Ctrl」＋「R」
- またはブラウザの「 更新ボタン」をクリック
リロード：Macの場合
- キーボードの「⌘ Command」＋「R」
- またはブラウザの「 更新ボタン」をクリック
ブラウザのリロードの仕方についてはこちらで詳しくご紹介しています。
-
-
ブラウザの再読み込み(リロード)に種類があるって知ってた？【初心者向け】
続きを見る
まとめ：ユーザー視点で設置のご検討を
今回、このスクリプトの設置にいたった経緯は、
ページの一番上にスライダーを設置しており、そのスライダーが半分くらい見える位置までスクロールした状態でリロード（更新）した際にスライダーの位置が崩れる不具合が発生したから。
その時に、リロードしたらページの一番上から表示するように設定できないか。と調べたのがきっかけ。
結局、スライダーを改良し不具合は解決しました。
これはあくまでも開発者側の勝手な仕様変更です。
ですが、サイトによってはこのような仕様を求められる機会があるのでは、と思いご紹介いたしました。
設置の際は、ユーザーにとってどちらが便利なのか。を考えて設置して下さい。
- WEBやプログラミングの知識をつけたい
- でも、スクールの学費は高すぎる
という方には、安価で始められる「侍テラコヤ」をチェックしてみて！
＼今なら１ヶ月無料クーポンコードあり／
-
-
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
続きを見る
1月31日まで
![【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も](https://hyakuyattsu.com/wp/wp-content/uploads/2019/03/css-list-ten-title.jpg)
