jQuery

【jQuery】ページのトップへ戻るボタンの作り方(フェードイン・アウト付き)

 

今回は jQuery を使った「ページのトップへ戻るボタンの作り方」を紹介します。
 

デモ動画

 
 
 

今あなたが読んでくださっているこのページを少しスクロールしてみると、画面右下に上向き矢印のボタンが表示されると思います。


 

これが今回紹介するトップへ戻るボタンです。

トップへ戻るボタンを用意しておくと、長いウェブページでもすぐにメニューがある上部に戻ることができるので、ユーザーの利便性を高めることができます。

ウェブサイトの管理者にとっても、サイトのいろいろなページを読んでもらえる可能性が高くなるので、あると嬉しい機能です。

私が今までに頂いたウェブアプリ開発の仕事でも何度も実装したことがある機能なので、覚えておくと便利だと思います🙂
 


 

動画

【jQuery】ページトップへ戻るボタンの作り方(フェードイン・アウト付き)

 
 

解説

HTML ファイルを用意する

index.html ファイルを作成して、ダミーテキストと三角形を用意します。

 

30行目: ▲

HTML 特殊文字コードを使って「▲」を表示しています。
もちろん画像を使うこともできます。
 
 

CSS を書く

次に CSS で「▲」をボタンらしく装飾していきます。

6~25行目を追加します。

 
 

jQuery を読み込む

jQueryを読み込む方法は2つあります。

  1. ファイルをダウンロードする
  2. CDNを利用する

今回はダウンロードではなく CDN(コンテンツデリバリネットワーク)を利用します。

CDN を使うとインターネット経由でファイルを読み込むことができるので、ダウンロード不要で簡単に使うことができます。

CDN を提供しているサイトはいくつかありますが、今回は私がいつも使っている「Google Hosted Libraries」を紹介します。

「Google Hosted Libraries」で検索、または Google Hosted Libraries にアクセスして jQuery のコードをコピペします。
 


 
 

3~9行目を追加します。

 
 

スクロールアニメーションを追加する

5~8行目を追加します。

 

6行目

$('html, body').animate({scrollTop:0}, 'slow');

html, body に対して 0 px の位置までスクロールするという処理を書いています。

'slow' の部分には実行速度を指定します。
初期値は 400 ミリ秒で「fast・slow・ミリ秒」を指定することができます。

 
 

フェードイン・アウトアニメーションを追加する

画面を 300 px スクロールしたらボタンを表示(フェードイン)して、300px より小さくなったらボタンを非表示(フェードアウト)にします。

3~9行目を追加します。

 
 

完成

以上で完成です。

上手く動かない場合は jQuery を正しく読み込めているか確認してみてください。

 
 

サンプルコード

 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません!)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

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