ページの先頭に戻るボタンを自作してみた

WordPressには色々なプラグインがあって、簡単に色々な機能が追加できるので便利なのですが、WordPressの高速化をしている段階で「Scroll To Top」というプラグインを外して自作する事にしました。その理由は以前の記事で書いてます。
⇒レンダリングをブロックしている JavaScriptをフッターに移動させる

上記記事を読んで頂けると分かるのですが、レンダリングブロック（読み込みの邪魔）していたjQuery本体をフッターに持っていく作業をした時にどうしてもこの「Scroll To Top」というプラグインをどうにかする必要がでてきました。という訳で今回はこの機能を自作します。

もちろん「Scroll To Top」というプラグインに罪はなく私のわがままです。それまでは不具合なく利用させて頂きました。

有料だけど個人的におすすめ

⇒初心者のための商標サイト設計図

1 Scroll To Topを自作するメリット
2 ページ先頭にスクロールするボタンの作り方
3 スクロールボタンを機能させる

Scroll To Topを自作するメリット

実際にページの先頭に戻るボタン「Scroll To Top」を作成して思ったのですが、これは結構メリットがあります。

PCページとスマートフォンページでサイズや色を手軽に変更できる
プラグインの更新でスタイルが初期状態になる事がない
ボタンをクリックした時にURLの最後に「#top」がつかない

これまでプラグインを利用している時にはプラグインの更新される度にプラグインのCSSを編集しなおしておりましたのでこの手間が省けます。それでPCページとスマートフォンページでボタンサイズを手軽に変更する事もできます。

そしてなによりボタンをクリックした時にURLの最後に「#top」がつかないのがメリットです。

プラグイン「Scroll To Top」を使っていて先頭に戻るボタンを押すとURLの最後に「#top」が付きます。

この状態でブックマーク等をすると「http://〇〇.com/#top」というURLで登録されます。つまりブックマーク数が分散される事になりますね。

ページ先頭にスクロールするボタンの作り方

まずは子テーマに「footer.php」を追加しておきます。親テーマの「footer.php」の内容を全部コピーして子テーマの「footer.php」に貼り付けておきます。既にある場合は不要です。

子テーマに「footer.php」を追加できたらそのファイルを開いて一番最後の方にある「/body」という部分を探します。その直前に次の記述をします。正確には「wp_footer()」の後に書いておけばOKです。

<div id="scroll-top"><p>▲TOP</p></div>

1	<div id="scroll-top"><p>▲TOP</p></div>

ここのｐタグで囲まれた部分（▲TOP）がボタンに表示されるテキストになりますのでお好みで変更してもOKです。ただ、スマートフォンでも同じテキストになるのであまり長くならないようにしておきます（ボタンのサイズによっては改行されるため）。

ここのボタン部分には「id=”scroll-top」という名前を付けておきました。上記のコードを入れたら「保存」を忘れずに。

次に子テーマのスタイルシートに記述していきますが、TwentyTwelveのようなレスポンシブデザインのテーマの場合はPCページのスタイルとスマートフォンページのスタイルをそれぞれ指定できます。

まずはPCとスマートフォン共通部分のスタイルを子テーマのスタイルシート（CSS）に書きます。

/* PCページとスマートフォン共通スタイル */
#scroll-top{ /* ボタンのデザイン */
background-color:#1F5E73; /* ボタンの背景色 */
color:#fff; /* ボタンの文字色 */
text-align:center; /* ボタン内の文字を中央に */
position:fixed; /* 画面がスクロールしても固定する */
right:20px; /* 固定する場所は右から20px */
bottom:20px; /* 固定する場所は下から20px */
display:none; /* ボタン表示は最初は非表示 */
margin:0 0; /* ボタンの余計な余白はいらない */
border-radius: 10px; /* 角を丸く */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; 
cursor:pointer; /* カーソルを指のマークに */
opacity:0.7; /* ボタンの透明度 */
}

/* PCページとスマートフォン共通スタイル */

#scroll-top{ /* ボタンのデザイン */

background-color:#1F5E73; /* ボタンの背景色 */

color:#fff; /* ボタンの文字色 */

text-align:center; /* ボタン内の文字を中央に */

position:fixed; /* 画面がスクロールしても固定する */

right:20px; /* 固定する場所は右から20px */

bottom:20px; /* 固定する場所は下から20px */

display:none; /* ボタン表示は最初は非表示 */

margin:0 0; /* ボタンの余計な余白はいらない */

border-radius: 10px; /* 角を丸く */

-webkit-border-radius: 10px; /* Safari,Google Chrome用 */

-moz-border-radius: 10px;

cursor:pointer; /* カーソルを指のマークに */

opacity:0.7; /* ボタンの透明度 */

}

次にボタンのサイズPC用を追加。

 /* ボタンのサイズPC用 */
@media screen and (min-width: 600px) {
#scroll-top{   /* ボタンのデザイン */
width:150px;   /* ボタンの横幅 */
height:40px;   /* ボタン高さ */
}
#scroll-top p{        /* ボタンのテキスト部分 */
line-height: 40px;  /* 文字の高さ */
}
}

/* ボタンのサイズPC用 */

@media screen and (min-width: 600px) {

#scroll-top{ /* ボタンのデザイン */

width:150px; /* ボタンの横幅 */

height:40px; /* ボタン高さ */

}

#scroll-top p{ /* ボタンのテキスト部分 */

line-height: 40px; /* 文字の高さ */

}

「@media screen and (min-width: 600px)」でブラウザのサイズが600px以上の場合という条件分岐ができます。つまりPCのページならこのサイズにしますという事です。

それと注意点ですが、サイズを変更する場合は「#scroll-top」の「ボタン高さ（height」と「#scroll-top p」の「文字の高さ（line-height）」という部分は同じ数字にしておいて下さい。

これを同じにしておくことでボタンのテキスト部分が垂直方向の真ん中に来ます。ボタンのテキスト部分が上に寄ったり下に寄ったりを解消できます。

それと「display:none」でボタンは非表示にしておきます。これは後でスクリプトを使ってフェードインさせたりフェードアウトさせるためです。

続いてスマートフォン用のボタンサイズを指定しましょう。先ほどブラウザサイズが600px以上の場合という条件分岐をしたので599px以下の場合という条件分岐でスマートフォン用のサイズを指定します。

/* ボタンのサイズスマートフォン用 */
@media screen and (max-width: 599px) {
#scroll-top{   /* ボタンのデザイン */
width:120px;   /* ボタンの横幅 */
height:40px;   /* ボタン高さ */
position:fixed; /* 画面がスクロールしても固定する */
right:10px; /* 固定する場所は右から10px */
bottom:10px; /* 固定する場所は下から10px */
}

#scroll-top p{ /* ボタンのテキスト部分 */
line-height: 40px; /* 文字の高さ */
}
}

/* ボタンのサイズスマートフォン用 */

@media screen and (max-width: 599px) {

#scroll-top{ /* ボタンのデザイン */

width:120px; /* ボタンの横幅 */

height:40px; /* ボタン高さ */

position:fixed; /* 画面がスクロールしても固定する */

right:10px; /* 固定する場所は右から10px */

bottom:10px; /* 固定する場所は下から10px */

}

#scroll-top p{ /* ボタンのテキスト部分 */

line-height: 40px; /* 文字の高さ */

}

「@media screen and (max-width: 599px)」というのがブラウザサイズ599px以下ならという条件分岐です。PC用とスマートフォン用でボタンの横幅を「150px」と「120px」に変更して、表示位置「right,bottom」も若干変更しました。

このようにスタイルシート1枚で条件分岐できるのがレスポンシブデザインの良い所です。

スクロールボタンを機能させる

さて、スタイルシートができましたので後はJavaScript（jQuery）の記述をしてWordPressで出力するようにします。これをしないと機能しません。レンダリングブロック（読み込みの邪魔）にならないようにフッターで出力します。そう、WordPress高速化のためにというのが目的でした。

さて、自作のJavaScriptをWordPressで利用する方法は別記事で書いておりましたので次の記事を参考にしてスクロールトップボタンを機能させてみましょう。
⇒自作のJavaScriptをWordPressで利用する方法