クリックするとページの一番上までスクロールしながら戻る機能を、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: 0を600ミリ秒かけて実行するという意味になりますね。
scrollTopプロパティは、設定した数値の地点までスクロールさせることができます。
数値に0を入れることで、ページトップから0pxの距離 = ページの一番上に移動するという意味になりました。
これで、クリックすると600ミリ秒かけてページトップにスクロールする機能の完成です！
【まとめ】jQueryでトップに戻るスムーススクロールを実装する方法
jQueryでページトップにスクロールする機能の実装方法を紹介しました。
JavaScriptでも同じ機能を実装することができますが、やはりjQueryの方が簡潔なコードで記述できますね。
JavaScriptバージョンの記事も作成しましたので、是非そちらも読んでみてください。
コメント