jQueryでページの「トップに戻る」ボタンを実装。スクロールに応じてフェードイン・アウト[WordPress]

@Mori2ndです。最近jQueryを利用していろいろカスタマイズするのに凝ってます。

今回はスクロールに応じてフェードイン・フェードアウトして出現する、ページの「トップに戻る」ボタンをPC向けサイトに実装してみました!

スポンサードリンク

ページの「トップに戻る」ボタンでやりたいこと

ページの「トップに戻る」ボタンを実装するにあたってやりたかったことは以下の3つ。

  • スクロールに応じてフェードイン・フェードアウトする。
  • 「トップに戻る」ボタンを実行した後もURLが変わらない。
  • WordPress用のプラグインはなるべく使わない。

この条件で調べていたところドンピシャの記事がみつかりました。グレート!

[Я]トップに戻るボタンをjQueryでニュルッと改造する : りくまろぐ

jQueryを利用して実装

先ほどの記事を参考にしてさっそく実装です。

jQueryのファイルを読み込む

最初にjQueryを利用するためのファイルを読み込みます。こちらはGoogleAPIからの例。

jQueryでの処理

続いてjQueryでの処理部分です。

ここでは「ボタンを表示するタイミング」と「ボタンを押してからトップに戻るまでのスクロール速度」を指定しています。

解説がわかりやすかったので、自分のブログに合わせた設定も簡単でした。

「トップに戻る」ボタンを設置

最後は「トップに戻る」ボタンを設置するための記述です。

このボタンをクリックするとスクロールしてトップに戻るようになります。

少し解説すると「#header」がトップの場所になっていて、ここに移動するイメージですね。(利用しているテーマに合わせてご指定ください。)

やり方によってはここで指定している「#header」がURLの最後に付く場合があります。
例)http://delightmode.com/#header

しかし、ここで実装した方法だとURLが変更されないようですね。

シェアしてもらったときなど、場合によってURLが変わるのは嫌ですからね。

CSSでデザインをカスタマイズ

ボタンが設置できたので、デザインをカスタマイズしました。

参考にこのブログでの内容を書いておきます。

ボタン部分の角を丸くして、カーソルが来た場合に色を変えています。

それから、z-indexでフッターと重なったときの配置を調整しました。

▼左側が通常。右側がカーソルが来た時。

CSSはそれほど詳しいわけではないので、不要な部分もあるかもしれません。実装する場合は必要に合わせて調整してみてください!

おわりに

りくまろぐさんの記事がわかりやすかったので、すぐに実装できました。ありがとうございます!

ページの「トップに戻る」ボタンがあると記事を読んだり、探したりがやりやすくなりそうだと思ったので導入してみたんですが、自分でブログの内容を確認しやすくなったのが一番よかったかも(笑)

@Mori2ndでした。

スポンサードリンク