WEB 作りたい

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

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

ホームページを見ている時に、ブラウザのリロード(更新)でページの先頭に自動でスクロールさせる方法をご紹介します。

ページの1番上のコンテンツを見せたい時や、上から順番に見せたい時などにご利用ください。

関連記事ブラウザの再読み込みの方法3種類
関連記事レスポンシブサイトでjavascriptを分岐させる方法

ページのリロード時に一番上から表示する方法

ランディングページパララックスデザインのサイトなどで、縦に長いホームページが多くなってきました。

そんな時にページのリロード(再読み込み)時に、一番上から表示する方法をご紹介します。

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

方法は、いたって簡単です。

下記のスクリプトをhtmlのheadタグ内に記述するだけです。

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

スクリプトを追記したページをブラウザで表示し、少し下にスクロールしてから再読み込み(リロード)をしてみて下さい。

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

リロード:Windowsの場合

リロード:Windowsの場合
リロード:Windowsの場合
  • キーボードの「F5」ボタン
  • または「Ctrl」+「R」
  • またはブラウザの「 更新ボタン」をクリック

リロード:Macの場合

リロード:Macの場合
リロード:Macの場合
  • キーボードの「⌘ Command」+「R」
  • またはブラウザの「 更新ボタン」をクリック

ブラウザのリロードの仕方についてはこちらで詳しくご紹介しています。

Check!
ウェブブラウザのリロードの種類をご紹介
ブラウザの再読み込み(リロード)に種類があるって知ってた?【初心者向け】

続きを見る

まとめ:ユーザー視点で設置のご検討を

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

今回、このスクリプトの設置にいたった経緯は、

ページの一番上にスライダーを設置しており、そのスライダーが半分くらい見える位置までスクロールした状態でリロード(更新)した際にスライダーの位置が崩れる不具合が発生したから。

その時に、リロードしたらページの一番上から表示するように設定できないか。と調べたのがきっかけ。

結局、スライダーを改良し不具合は解決しました。

daruma108

これはあくまでも開発者側の勝手な仕様変更です。

ですが、サイトによってはこのような仕様を求められる機会があるのでは、と思いご紹介いたしました。

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

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」をチェックしてみて!

\今なら1ヶ月無料クーポンコードあり/

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

1月31日まで

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

design WEB

2023/1/23

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2022/11/9

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

ブログにコメント欄は必要?非表示にする設定方法【WordPress】

WEB 作りたい

2022/10/5

ブログにコメント欄は必要?非表示にする設定方法【Wor...

誰でもホームページの更新ができるようにする方法【googleドキュメント簡単活用術】

WEB 作りたい

2022/9/11

自社で更新できるホームページ作成【Googleドキュメ...

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

-WEB, 作りたい
-, , ,