ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビューンとページの初めに戻る。
そう、このページでも右下に表示されていますね。
長いコンテンツでは単純なリンクでも便利ですが、スクリプトを使った動きのある挙動はさらに楽しいです。
今回はそのページ内リンクの実装方法を紹介します。
WordPress では例にもれず「 Dynamic To Top Settings 」などのプラグインで実装可能ですが、今回は jQuery を使って自前で実装してみたいと思います。
jQuery ライブラリの読み込みを確認する
WordPress ではほとんどのテーマで同梱の jQuery が読み込まれます。
ソース上の head 内に以下のように jQuery が読み込まれているか確認してください。
<script type='text/javascript' src='https://seous.info/wp-includes/js/jQuery/jQuery.js'></script>もし、読み込まれていない場合は head 内にwp_enqueue_script()関数を追記して、 jQuery を読み込ます。
<?php wp_enqueue_script('jQuery'); ?>スクリプトを追加する
jQuery の読み込みを確認したら、 head 内に実行スクリプトを追加します。
このスクリプトではボタンリンク、および、アニメーションでの挙動を制御しています。
ファイルとして保存して、外部から読み込んでもよいです。
<script>
jQuery(function($) {
var showFlag = false;
var topBtn = $('#page-top');
topBtn.css('bottom', '-100px');
var showFlag = false;
//スクロールが 100 に達したらボタン表示
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({
'bottom': '0px'
}, 200);
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({
'bottom': '-100px'
}, 200);
}
}
});
//スクロールしてトップ
topBtn.click(function() {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>基本的にこのままで問題ないと思いますが、簡単に解説します。
4 行目 #page-topでどのセレクタをボタンにするか指定しています。
5 行目 -200この値でボタンを待機させる位置を決めます。
8 行目 どのくらいスクロールしたらボタンを登場させるかの設定です。
11 行目 ボタンを登場の際のアニメーション設定です。
16 行目 ボタンが隠れる際のアニメーション設定です。
22 行目 トップに戻った際のトップからの位置指定です。
23 行目 トップに戻る際の移動速度。500の値を小さくするとより早く移動します。
HTML タグの記述
上記スクリプトの 4 行目で指定の id に対して動作しますので、下記のようにid="page-top"を加えたタグを body 内に加えます。
他の id 名や class 指定でも OK です。
記述箇所は body 内であればどこでも構わないのですが、ヘッダ部分の最後あたりが分かりやすいかもしれません。
<p id="page-top"><a href="#top">PAGE TOP</a></p>CSS での装飾
最後に CSS でボタンデザインを定義します。
下記サンプルは閲覧の邪魔にならないようボタンを半透明としています。
また、レイヤーを使っていた場合にボタンが要素の下に潜りこむのを防ぐためにz-index:10を指定しています。
ボタン自体の大きさ・色・位置などのスタイルはお好みでということになりますが、 2 つのパターンを載せておきます。
テキストリンク
<code>#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 15px;
z-index: 10;
}
#page-top a {
filter: alpha(opacity=25);
-moz-opacity: 0.25;
opacity: 0.25;
background: red;
text-decoration: none;
color: #fff;
width: 100px;
text-align: center;
display: block;
border-radius: 5px;
padding: 30px 0;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}アイコンボタン
<code>#page-top {
position: fixed;
bottom: 0;
margin-bottom: 20px;
right: 20px;
font-size: 50px;
z-index: 10;
}
#page-top a {
background: none repeat scroll 0 0 red;
border-radius: 5px;
color: #fff;
display: block;
font-family: FontAwesome;
opacity: 0.25;
text-align: center;
text-decoration: none;
width: 80px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}こちらはボタンにアイコン（Font Awesome）を使ってみました。
この場合は Font Awesome を使用する場合は head 内に CSS を読み込む必要があります。
とりあえず、 CDN より下記のスタイルシートを読み込むことで使用可能です。
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">ボタン自体のタグは下記をお使いください。
<p id="page-top"><a href="#top"><i class="fa fa-arrow-circle-up"></i></a></p>それぞれの表示サンプルです。
補足
思ったよりも簡単に実装できたのではないでしょうか。
基本的には jQuery ライブラリの読み込みと CSS とヘッダにさえ追記できれば、静的な HTML サイトや無料ブログでも使えます。
もし、 PC 表示では不要ということであれば、 WordPress ではモバイル判定を行って条件分岐してもよいですし、単純にメディアクエリを使いスマホサイズ以外では非表示にしてもよいでしょう。
@media only screen and (min-width:769px) {
#page-top {
display: none;
}
}ユーザビリティ向上にも効果あるはずなので、ぜひ、チャレンジしてみてください。
この記事が役に立ったら「いいね」！
