【jQuery】ページのリロード時に、ページTOPに戻る方法

2020-04-08

Webサイトにおいて、ページのリロード時にページTOPに戻る方法を記載していきます。

使用するケース

ページのリロード時にページTOPに戻ることを必要とするケースは、主に「ページのTOPを何度も見せたい」もしくは「上から順にページスクロールすることを想定した動きを入れている」といった場合と思われます。

このようなページを作成する際には有効な機能となりますので、取り入れましょう。

サンプル

リンク

方法

「jQuery」を使用して実装を行いますので、「body」の最後に下記の通りjQueryの読み込み用コードを追記します。
※ダウンロードしたものを使用してもOKです 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

そして、jQueryの読み込みコードの下に書くコードはこちらです。 

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

  </script>

「html」「body」については、ブラウザによりどちらか片方では動作しない場合があるので、両方の記述が必要となります。

補足

「上から順にページスクロールすることを想定した動きを入れている」 場合について、特定の位置までスクロールすると要素にclassを付与する作りになっている場合は、上記コードのコールバック関数でclassの削除が必要です。

コールバック関数として記述しないと、TOPに戻っているまでの間に再度classが付与されてしまうことがあるためです。

<script>
    $(function() {
      $('html,body').animate({
        scrollTop: 0
      },function(){
      ★クラスを外す処理★
      });
    });

  </script>

以上となりますです。

Web制作,jQuery