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

2019/10/17

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

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

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

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

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

CDNでjQueryを読み込む

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

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

今回は楽ちんな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公式のものよりも高速という優れものです。

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

index.html

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

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

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

index.js

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

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

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

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

以上です。

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

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

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

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