ページに「Topへ戻る」ボタンを設置する

CSSとjQueryを使用して画面スクロールすると右下に「Topへ戻る」ボタンを表示させる方法です。「Topへ戻る」ボタンを押すとシュッとページ最上部に移動します。

jQuery本体読み込み

まず、jQueryで動かすためにjQuery本体をhead内で読み込みしておきます。

[HTML]

8行目のscriptの部分です。

ボタンの設置とスクリプト読み込み

いくつか方法がありますが、今回はbuttonタグを使用して設置します。ボタンを表示する位置は固定としますので、body終了タグの前あたりに入れておくとよいでしょう。ここでは11行目に入れています。

[HTML]

12行目のscriptは今回使用する「Topへ戻る」ボタンを動作させるためのスクリプトです。スクリプト名は任意でOK。今回はsample.jsとしています。ファイルの拡張子は.jsとしましょう。スクリプトの読み込みは先読みするとボタンのidが認識できないのでボタン設置より後ろにして下さい。

[CSS]

header,main,footerにheightを設定していますがテスト的にスクロールできるよう高さを入れてあるだけです。

21行目。スクロールするまでボタンが見えないようにしたいのでdisplay: none;としています。設置する位置を確認する際にはdisplay: block;として確認後にdisplay: none;へ変更するとよいでしょう。

ボタンの位置、装飾はお好みで変更して下さい。

[JavaScript(jQuery)] ファイル名: sample.js

※記述のjQuery部分は$としても動きますがWordPress対応も考慮してjQueryとしています。

7行目。tagetPos値で最上部からどこまでスクロールしたらボタンを表示させるかを設定します。ここでは300pxスクロールするとボタンが表示されます。逆に最上部から300px以内にスクロールして戻るとボタンは消えます。

26行目。戻る速度を設定しています。ここでは戻る速度200としています。一瞬で戻りたいなら0として下さい。

WordPressに導入する場合

WordPressではjQuery本体は導入されているので本体の読込は不要です。読み込むと2重適用になってしまうので速度が遅くなるかもしれません。

「Topへ戻る」ボタンを動作させるscriptの読込記述はHTMLではなくfunctions.phpに記述します。

[functions.php]

scroll-actionは任意の名前です。私のWordPress環境ではこれで動きます。