ページ先頭に戻るボタンの作成
ページトップに戻るボタンの作成方法です。
- HTML内に以下を記述します。私の場合は
wp_footer
をコールする直前に記述しました。
- cssに以下を追加します。色や形状は好みに合わせて変更してください。
今回はpage-top
に表示位置を、a
タグに形状や文字のスタイルを設定しています。
表示結果

今回は文字列ですが、最近はFont Awesomeなどを使うケースが多いですね。
一定量スクロールしてからボタンを表示させる方法
上記は常にボタンを表示する方法ですが、一定量スクロールしてからボタンを表示したい場合も多いと思います。以下はそのサンプルです。(jQueryを使用します)
page-top
のスタイルに以下を追記します。
<head>
タグに以下を追記します。
ここではheader
タグが少しでも隠れたらボタンを表示するようにしています。もし、100pxスクロールしたらボタンを表示するようにしたい場合は、
を
とすればOKです。