トップへ戻るボタンをjQueryで作るには?【秒で実装】

みなさんこんにちは、ゆうやです。

つい昨日までは半袖を着ていたのが信じられないような秋、いかがお過ごしでしょうか。

この記事では、jQueryで作る「トップへ戻る」ボタンを紹介します。スマートフォンでWebサイトを閲覧した時によく見かけるあれです。

こういうやつ。タップすると「スルスル〜」っとページトップへ戻るアニメーションがついているボタンですね。

さっそく作っていきましょう。

CDNでjQueryを読み込む

まず、jQueryを使えるよう準備をしましょう。

  • ダウンロードしてプロジェクトフォルダに配置して読み込む
  • CDNで読み込む

読み込み方に関してはざっと上記のように2つの方法があります。

今回は楽ちんなCDNで読み込みます。

MEMO
ちなみに、CDNはコンテンツデリバリーネットワークの略だそうです。詳しくはこちらの記事で解説されていたので気になる方はご覧ください。https://blog.redbox.ne.jp/what-is-cdn.html

ご自身のHTMLファイル<head></head>内で以下のようにCDNを読み込んでください。

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

天下のGoogleが提供しているCDNで、jQuery公式のものよりも高速という優れものです。

参考 GoogleのCDNサービスリストGoogle公式サイト

トップへ戻るボタンを追加

タップ元のボタンをHTMLに配置しましょう。コピペでどうぞ。

index.html
<a class="JS_Click_ScrollTop_Trigger">トップへ戻る</a>

cssはご自身で好きなようにしてください。気が向いたら追記していきます。

jQueryのコードを追加

仕上げにjQueryのコードを追加しましょう。コピペでどうぞ。

index.js
$('.JS_Click_ScrollTop_Trigger').on('click',function () {
$('html, body').animate({
scrollTop: 0
}, 500);
});

「scrollTop」メソッドは、現在のスクロール位置を戻り値として返してくれるものです。(最上部の値は0)

ですので上記のコードでは、トップへ戻るボタンをタップしたら500ミリ秒かけてページトップへ戻るアニメーションを実現しています。

「500」という数字はスクロールする速度です。お好みで調整してください。

以上です。

まとめ

いかがでしたでしょうか。

今回紹介したアニメーションは、jQueryの知識がほぼなくても秒で実装できますのでやったっことがない方はぜひ挑戦してみていただきたいです。

次もjQueryを使用したちょっとしたアニメーションを紹介していきます。

最後までご高覧いただきありがとうございました。

2 Comments

yuya

いや〜わかりやすく書こうと思ってやったけどなかなか書くモチベーションを書き終えるまで保ち続けるのが難しいね笑
ぬるぽのSPAブログすげえはやかった!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です