【jQuery】ページのリロード時に、ページTOPに戻る方法
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>
以上となりますです。