WordPressカスタマイズ

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

更新日:

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

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

スポンサードリンク

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

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

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

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

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

jQueryを利用して実装

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

jQueryのファイルを読み込む

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

jQueryでの処理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

@Mori2ndでした。

スポンサードリンク

ピックアップ記事

1

iPhoneで格安SIMを使って月額料金を節約したい!でも敷居が高くてわからない。そんな風に考えている人はきっと多いはず。ここではiPhoneで格安SIMを利用するまでの手順・乗り換え方法や注意点など、詳しくご紹介しています。

2

機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

3

AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD(Power Delivery)対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

4

パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。それがウエスタンデジタルの「WD Elements Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。

5

快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね!商品の特徴や使ってみた感想をご紹介します。

-WordPressカスタマイズ
-, ,

Copyright© ディライトモード , 2019 All Rights Reserved.