jQueryで簡単設置！ページ先頭,トップへ戻るボタンの高機能な設定方法

ブログ画面の右下にページの先頭（トップ）へ戻るボタンを設置しました。フワッと現れ、移動は加速スクロールします。画面幅が狭まると邪魔にならないようフェードアウトします。こんな多機能ボタンの簡単設置方法です。

記事一覧ページや長文記事では有効なナビゲーションになります。大手メディアや有名ブログでも設置しているため、違和感なく使用する人が増えてきている気がします。

ゆめぴょんです。こんちはっ(^^)/

「ページ先頭へ戻る」ボタンは、以前から存在していました。しかしまだあまり馴染みもなかったからか、また派手なボタンも多かったためか、少し邪魔者扱いされている雰囲気もありました。

しかし最近はサイドバーやSNSボタンと同じく「ページ先頭へ戻る」ボタンも定着化しつつあります。

フェードインするページ先頭へ戻るボタンの設置メリット

1. 多くのサイト・ブログで設置しているため訪問者が自然に利用できる
2. 長文や一覧ページなどの縦に長い記事では、有効なナビゲーション
3. ページ右下の邪魔にならない位置に設置できる
4. 押した後の動作が気持ち良い

「ページ先頭/トップへ戻る」ボタンは、便利なナビゲーションであることは間違いないけど、あまり主張が強いと敬遠されることもあります。また本来の主役である「記事」や「サイドバー」に重なることのないよう次の機能を実装します。

戻るボタンに実装したい機能

ページ先頭へ戻るボタンの設置について書かれた記事は多くて多種多様です。自分の好みで選ぶのが良いでしょう。私は次のような機能がほしかったので実装しました。不要な部分は各自でカットしてください。他にオススメ機能あれば教えてくださいね。

1. ページ先頭では不要なので、少しスクロールした後にフワッと（フェードイン）表示
2. ボタンを押すと、ニュルッと加速スクロールして戻る
3. ブラウザの画面幅を狭めた時に、テキストに重ならないよう非表示にする
4. スクロール後にブラウザのURLに「#」を残さない
5. ついでに「ホーム（ブログのトップページ）」へ戻るボタンも設置

2、4の機能については下の記事のスクリプトをそのまま利用しました。参考にしてみてください。

多機能な戻るボタンの設置方法

設置に関しての注意点

設置はとても簡単です。ただスタイルシート、HTML、JavaScriptの3種類のソースコードをそれぞれ記述するのは、初心者にはわかりづらいとも言われたので、今回はスタイルシート、JavaScriptもHTML内に含めました。

導入テストする場合にもこの方が楽ですね。もし設置しないことに決めても、1ヶ所だけをすぐ削除できます。慣れている方はスタイルシート、JavaScriptの部分を切り出して、外部ファイルなどに移動してください。

なお今回のソースコードは失敗しても元の表示には影響を与えませんが、念のため設置前には必ずファイルのバックアップは作成してください。そして設置後に問題が発生したらすみやかに元のファイルに戻してください。設置は自己責任でお願いします。

jQueryスクリプトファイルの設置

まずは「jQuery」のスクリプトファイル（JavaScript）を設置します。まだ使ってなければ次の1行を記述してください。WordPressの場合はテーマや利用プラグインによっては設置されている可能性が高いのでソースを検索して、ない場合のみ追加してください。

[html]
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
[/html]

ちなみに「jquery/1.10.2/」の数値部分はバージョンを表しています。バージョン2系でも同様に使えます。

設置場所の理想はフッターの後で</body>の直前くらいです。WordPressに設置したい初心者の場合は、管理画面から「テーマ」→「テーマ編集」で「footer.php」に追記することになります。

なお以前の記事、サイドバーの自動追尾の時にも「jQuery」を設置しました。自動追尾スクリプトが動作しているのなら「jQuery」は設置済です。

WordPressのバージョンによっては、下のスクリプトは動作しません。その場合は全ての「$」を「jQuery」に変えてみてください。それでもダメなら「jQuery」ファイルを複数回読み込んでないかを確認してください。

HTMLとJavaScriptの設置

下のソースコードを設置するだけで機能します。設置場所はHTMLファイル内のフッターの下が適切です。</body>タグの直前あたりがオススメです。

スタイルシートの記述はheadタグ内か、外部ファイルへ移動するのが良いので、慣れてきたら移動してください。

[html]
<style type="text/css">
.fixbtn {
position: fixed;
z-index: 1500;
}
#totop {
right: 4px;
bottom: 6px;
}
#totop a {
display: block;
background-color: #fccd5d;
margin: 0 0 10px 0;
padding: 10px;
font-size: 85%;
text-align: center;
border-radius: 10px;
}
#totop a:hover {
background: #fda;
}
</style>

<div id="totop" class="fixbtn">
<a href="#">ページ<br>先頭↑</a><br>
<a href="http://wispyon.com">ホームへ</a>
</div>

<script type="text/javascript">
$(function() {
//ページ内リンク#非表示。加速スクロール
$(‘a[href^=”#”]’).click(function(){
var speed = 800;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});

//フェードインするボタン
var fixBtn = $(‘.fixbtn’);
fixBtn.hide();
$(window).resize(function(){
if($(window).width() < 1200) { fixBtn.hide(); } // 画面幅1200以下で非表示
else{ fixBtn.fadeIn(); }
})
$(window).scroll(function () {
if ($(this).scrollTop() > 500 & $(window).width() > 1200) { //500pxスクロールで表示
fixBtn.fadeIn();
} else {
fixBtn.fadeOut();
}
});
});
</script>
[/html]

簡単な説明とカスタマイズ方法

スタイルシート部分（<style>で囲まれた部分）の#fdaなどは色を表しているので、自分好みの色にすることが可能です。ボタンの大きさ、フォント、配置場所なども変更可能です。

ソースコードの26行目の「http://wispyon.com」の部分は必ず各自のサイトのホームアドレスに変更してください。

scriptの中の「speed = 800」はスクロール速度です。大きいほどゆっくりになり、小さいほど速くなります。私の体感的には400〜1200の間におさめるのが適切だと思っています。好みで変えてみてください。

同じくscript内に2ヶ所ある「$(window).width() < 1200」の「1200」の値は、ブラウザの幅を1200pxよりせまくした時にボタンを非表示にする設定です。各自のサイトの横幅に合わせて変更してください。

「$(this).scrollTop() > 500」の「500」の値は、ページ先頭から500pxスクロールしたらボタンをフェードイン表示するという設定です。好みで変更してください。100pxくらいのサイトも多いようです。

ボタンのidとclassを分けている理由は汎用性を持たせるためです。ソーシャルボタンなどを固定したい場合もclass「fixbtn」は利用できます。加速スクロールは目次機能でも使っています。

まとめ：今日のゆめぴょんの知恵

今回は地味なカスタマイズですが、こだわるといろいろな機能を付けることができて面白いです。もちろん訪問者はそこまで考えて利用することは少ないので、サイト・ブログ運営者の自己満足に近いです。

しかしこだわって設置した機能（フェードイン、画面幅によるフェードアウト、追尾スクロール、加速スクロールなど）は後に、ソーシャルボタン、サイドバー、目次機能などにも転用できるため勉強にもなりました。

なおフェードインつながりで、次の記事も興味ある方は読んでみてください。

ゆめぴょんでした。ちゃおっ！