[jQuery]ページトップに戻るボタンの作成

css

こんにちは、タカフミです!

今回は簡単にページのトップに戻れるボタンの作成方法を解説をしていきます。

長いブログやウェブサイトってスクロールするのが大変ですよね。

そんなときに一瞬でトップに戻れたら便利だわっていうことで作っていきたいと思います。

目標物

最初の画面がこれで下にスクロールすると

右下にボタンが出てきました。

ではこれを作っていきます。

実際に作成

まず最初に準備として以下のようなコードを用意します。

HTML

今回はjqueryを使用するのでその準備と、Bootstrapでfontawesomeも使用した(ボタンの中にある三角)のでこれらのコードも書きました。

Bootstrapの説明は下の記事から是非!

ここからcss,jqueryも書いていきます。

CSS

#topでボタンの位置を調整して、display:none;をつけることで一番上の状態ではボタンを非表示にしています。

jQuery

以上がjQueryのコードになります。

上から順番に説明していくと、

まず最初にhtmlで指定したidを変数pagetopと定義しました。

次にifを使ってページのスクロール量でボタンを表示できるようにしました。

今回は100pxスクロールされたらボタンが表示される仕組みです。

最後にアニメーションですが、500っていうのが速さを表していて値が小さいほどスクロールされる速度が速くなります。

コード自体はコピペで使えるので是非!

まとめ

  • htmlで任意のidを設定する
  • cssでボタンを装飾しつつ、初期配置ではdisplay:none;
  • jQueryのコードはコピペでOK

今回はこんな感じで終わりにしようと思います。

最後まで読んでいただきありがとうございました!!