html javascript WEB 作りたい

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

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

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

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

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

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

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

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

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

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

ホームページが更新されない時の対処法、ブラウザの再読み込み(リロード)の方法とスーパーリロード、キッシュのクリア方法、プライベートブラウザでの閲覧と4種類の対処法をご紹介いたします。

続きを見る

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

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

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

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

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

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

-html, javascript, WEB, 作りたい
-, , , , ,

© 2021 ひゃくやっつ