【サンプルあり】jQueryでページのトップへ戻るボタンの作り方

【サンプルあり】jQueryでページのトップへ戻るボタンの作り方

どうも、ジャングルオーシャンのミケです。

今日はjQueryで作るページのトップへ戻るボタンのご紹介だよ!




ページのトップへ戻るボタンとは

ページのトップへ戻るボタンは

例えば、スクロールする量が多いページなどで

一番上に戻りたい時に

パソコンだとマウスホイールをカリカリカリカリカリカリカリカリカリカリってやるのは大変だし

スマホだと指をスッスッスッスッスッスッスッスッスッスッスッスッって動かすのも大変だよね

そこで、クリック一つでページの一番上に戻るボタンがあると便利!

ということでできたボタンがページのトップに戻るボタンなんだ

だいたいページの右下に固定されて表示されている事が多いね。

イメージはサンプルデモページを見てみてね。

サンプルデモページはこちら

jQueryを導入する

まずはjQueryを導入するよ!

ファイルをダウンロードして導入する

jQueryの公式サイトからファイルをダウンロードしてね。

jQueryの公式サイトはこちら

ダウンロードができたらファイルを読み込ませるコードを書こう!

CDNを使って導入する

CDNを使って導入することもできるよ。

CDNの場合はファイルをダウンロードせずに

以下のコードを書くだけで大丈夫だよ!

シンプルなページのトップへ戻るボタン

まず最初はシンプルなページのトップへ戻るボタンを実装してみよう!

記述は以下のようになるよ。

HTML

CSS

jQuery

サンプルデモページはこちら

contentクラスのついたdiv要素の中に入っているtopBtnというid属性がついたdiv要素をトップに戻るためのボタンにしているよ。CSSでボタンを丸くして「TOP」という文字が中心にくるようにしているよ。また、このボタンはposition:fixed;right:20px;bottom:20px;で画面の右下に固定されるようにしているよ。トップへ戻る挙動はjQueryで記述していて、animate()メソッドを使っているんだ。

途中から表示されるページのトップへ戻るボタン

次はスクロールしていると途中から表示されるページのトップへ戻るボタンを

実装してみよう!

記述は以下の通りだよ。

HTML

CSS

jQuery

サンプルデモページはこちら

1つ目のサンプルとほとんど同じで、違う所はjQueryで追加した箇所だけだね。最初はボタンをhide()で非表示にして、1000px以上スクロールした時に表示してそれ以外は非表示にするようにif文で書いてあるよ。「1000」と書いてあるのは1000pxのことだからここを「500」にしたら500pxを境にして表示、非表示を切り替えることができるよ。

ある要素を過ぎると表示されるページのトップへ戻るボタン

HTML

CSS

jQuery

サンプルデモページはこちら

HTMLshowBtnクラスのついた要素を追加したよ。この要素を過ぎた時にページのトップへ戻るボタンが表示されるようになっているよ。jQueryもさっきのサンプルと少し変わっていて、showBtnクラスのついた要素の位置情報をoffset()メソッドで取得して変数showに入れていて、そのshowtopからの位置情報をさっきのサンプルで「1000」となっていた箇所に入れているからshowBtnクラスのついた要素を過ぎた時に表示されるようになっているよ。

ページのトップへ戻るボタンを記号で表示したい!

今までのサンプルで作ったボタンは

ボタンに「TOP」と文字が表示されていたけど

これを文字じゃなくて記号を表示したいという場合もあるよね。

今回は、Font Awesomeを使ってボタンを記号で表示する方法を紹介するね!

ちなみにFont Awesomeは「フォント オーサム」って読むよ!

まずはheadタグ内にこのコードを記述しよう!

これでFont Awesomeを使う準備はできたよ!

次にFont Awesomeのページに行って使いたい記号を選ぼう。

Font Awesomeのアイコン一覧ページはこちら

ページのトップへ戻るボタンを記号で表示したい!

このページにはFont Awesomeで使えるアイコンがずらっと並んでいるんだ。

ちなみに薄いグレーになっているアイコンは有料会員にならないと使えないよ。

このページにある検索ボックスで使いたいアイコンを検索しよう!

今回は、「arrow」と検索して出てきた「arrow-up」というアイコンを使うよ。

使いたいアイコンをクリックすると、アイコンのページに飛ぶから

そこで下の方にある「Start Using This Icon」をクリックしよう。

ページのトップへ戻るボタンを記号で表示したい!2

そうするとモーダルウィンドウが出るからそこに書いてある

HTMLのコードをコピーしよう。

ページのトップへ戻るボタンを記号で表示したい!3

これをさっきまで「TOP」という文字を入れていた所にコピペしよう。

これで記号を使う準備はできたね。

それじゃ、それぞれのコードをみていこう!

HTML

CSS

jQuery

サンプルデモページはこちら

HTML「TOP」と書いていた箇所をFont Awesomeに変えただけで、さっきのサンプルとの違いはないね。これだけですぐ使えるFont Awesomeってすごく便利だよね!

ページのトップへ戻るボタンを画像で表示したい!

次は「TOP」と文字で書いていたボタンを画像で表示してみよう。

HTML

CSS

jQuery

サンプルデモページはこちら

HTMLのボタンの箇所に書いてあった「TOP」の代わりにimgタグで画像を入れて、CSSwidthを指定する事で画像のサイズを調整したよ。CSStransformは画像を回転させるために書いたよ。

レスポンシブでボタンの表示非表示を切り替える

正直、あんまり使うことはないかもしれないけど

ボタンをレスポンシブページで使うときに

表示、非表示を切り替えたいという場合もあるかもしれないよね。

そんなときは以下のような記述をすると

デバイス毎に表示、非表示の切り替えをすることができるよ。

今回、ブレイクポイントは768pxで作っているよ。

HTML

CSS

jQuery

サンプルデモページはこちら

ブレイクポイントを768pxに設定していて、768px以下の時にはボタンが非表示になるようにしているよ。CSSでメディアクエリを使って768pxの時には非表示になるように設定していて、jQueryでウィンドウの横が768px以上の時には表示されるようにしているよ。

まとめ

無事に実装できたかな?

1クリックでページの一番上まで戻れるから

結構便利な機能だよね。

ぜひ自分のウェブサイトにも導入してみてね。

それじゃまた今度!

TwitterやFacebookのフォローよろしくね!

Twitter
@michelgorilla

Facebook
ミケランジェロ




プログラミングカテゴリの最新記事