【jQuery】トップに戻るスムーススクロール機能を実装する方法

クリックするとページの一番上までスクロールしながら戻る機能を、jQueryで実装する方法を紹介します。

以前の記事で、素のJavaScriptで同じ機能の実装方法を紹介しましたが、jQueryではより簡潔に記述することができますので、是非参考にしてみてください。

目次

【コピペ用】トップに戻るスムーススクロールの実装コード

ここでは、コピペしてすぐに使用するための実装コード一式を紹介していきます。

まずはjQueryをプロジェクト内に読み込む必要があるので、以下のCDNを<head>タグ内に記述してください。

<!-- jQueryのCDNを読み込む -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

以下はjQueryのコードです。

ここでは、#scroll-topというIDがついた要素をクリックすると、ページトップにスクロールするように組んでいます。

$("#scroll-top").on("click", function () {
  $("html, body").animate({ scrollTop: 0 }, 600);
});

以上でコピペ用のコードの紹介は終わりなので、次で解説をしてきます。

【解説】トップに戻るスムーススクロールの実装コード

ここからは実装コードの解説です。

$("#scroll-top").on("click", function () {
  $("html, body").animate({ scrollTop: 0 }, 600);
});

まず#scroll-topという要素に対して、clickイベントを設定しています。

$("#scroll-top").on("click", function () {
  // ここにクリック時の処理を記述
});

これで、#scroll-topをクリックすると何らかの処理が行われるようになりました。

次に、トップにスクロールする機能を記述していきます。

$("html, body").animate({ scrollTop: 0 }, 600);

ここではanimate関数とscrollTopプロパティを使用します。

まずanimate関数の第一引数には実行したい処理、第二引数にはアニメーション実行時間をミリ秒単位で記述します。

なのでこの行はscrollTop: 0600ミリ秒かけて実行するという意味になりますね。

scrollTopプロパティは、設定した数値の地点までスクロールさせることができます。

数値に0を入れることで、ページトップから0pxの距離 = ページの一番上に移動するという意味になりました。

これで、クリックすると600ミリ秒かけてページトップにスクロールする機能の完成です!

【まとめ】jQueryでトップに戻るスムーススクロールを実装する方法

jQueryでページトップにスクロールする機能の実装方法を紹介しました。

JavaScriptでも同じ機能を実装することができますが、やはりjQueryの方が簡潔なコードで記述できますね。

JavaScriptバージョンの記事も作成しましたので、是非そちらも読んでみてください。

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
閉じる