jQeury でページの先頭へ移動するボタンを作成する

スポンサーリンク

ページをある程度スクロールすると、右下にボタンが出現して、そのボタンをクリックすると、ぬるっとスクロールしながらページのトップに戻っていく機能を jQuery を使って実装する方法です。

ページの先頭へ移動するボタンの実装に必要なものは

  1. ボタンの HTML の記述
  2. ボタンのデザイン、動作などの CSS の記述
  3. jQuery への参照
  4. ボタンの表示/非表示とクリックしたときの動作の jQuery の記述

の4つです。

作成するボタンのデザインは、とりあえずこんな感じにしておきます。

ページの先頭へ移動するボタン

では、HTML の記述から順番に見ていきましょう。

ページの先頭へ移動するボタンを HTML で記述する

P タグと A タグでボタンの枠組みを作成します。
CSS でのスタイルの設定と、jQuery での操作に必要なので P タグの ID を設定します。ここでは「to-pagetop」としておきます。
A タグの中に表示する文字列を記述します。文字列ではなく画像を使う場合は「▲ ページの先頭へ」の部分を IMG タグに置き換えます。

CSS でボタンのデザインと動作を指定する

30~37行目の装飾は必要に応じて変更してください。不要であれば削除してしまっても問題ありません。

jQuery への参照を追加する

body の終了タグの前あたりに jQuery への参照を書いておきます。バージョン (本サンプルでは「1.9.1」) は環境に合わせて適宜変更します。

jQuery のコードを記述する

ページのトップからのスクロール位置が 200 を超えたらボタンをフェードインで表示して、逆に 200 に満たない場合はフェードアウトで隠します。
25 行目の [fast] はスクロールする時のスピードなので、遅くする場合は [slow] を指定してください。

WordPress を使ってサイトを作成している場合は、すでにテーマに組み込まれていることが多いので、わざわざ自分で実装をすることはありませんが、最近古い Web サイトのリプレイスを頼まれた時に、実装しないといけなかったので一応まとめておきました。