「トップに戻る」ボタンでスマホでのユーザビリティアップ!

ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビューンとページの初めに戻る。
そう、このページでも右下に表示されていますね。
今回はそのページ内リンクの実装方法を紹介します。
長いコンテンツでは非常に便利ですし、動きがあってちょっと楽しいです。
結構前から見かけていましたが、クライアントのスマホ想定が必須となった今こそユーザビリティ的にも活きてきそうな仕掛けです。
WordPressでは例にもれず「Dynamic To Top Settings」などのプラグインで実装可能ですが、今回はjqueryで実装してみたいと思います。
最後まで読んでいただければ、静的なHTMLサイトへも実装できるはずです。
Jqueryライブラリの読み込みを確認する
WordPressではほとんどのテーマで同梱のJqueryが読み込まれます。
ソース上のhead内に以下のようにJqueryが読み込まれているか確認してください。
もし、読み込まれていない場合はhead内にwp_enqueue_script関数を追記して、Jqueryを読み込ます。
スクリプトを追加する
Jqueryの読み込みを確認したら、head内に実行スクリプトを追加します。
このスクリプトではボタンリンク、および、アニメーションでの挙動を制御しています。もちろんファイルとして保存して、外部から読み込んでもよいです。
jQuery(function() {
var showFlag = false;
var topBtn = jQuery('#page-top');
topBtn.css('bottom', '-100px');
var showFlag = false;
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > -200) {
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 () {
jQuery('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
基本的にこのままで問題ないと思いますが、簡単に解説します。
4行目 "#page-top"でどのセレクタをボタンにするか指定しています。
5行目 "-200"この値でボタンを待機させる位置を決めます。
8行目 どのくらいスクロールしたらボタンを登場させるかの設定です。
11行目 ボタンを登場の際のアニメーション設定です。
16行目 ボタンが隠れる際のアニメーション設定です。
22行目 トップに戻った際のトップからの位置指定です。
23行目 トップに戻る際の移動速度。"500"の値を小さくするとより早く移動します。
HTMLタグの記述
上記スクリプトの4行目でpage-topというidに対して動作させるよう指定してありますので、下記のようにid="page-top"を加えたタグをbody内に加えます。もちろん、他のid名やclass指定でもOKです。body内であればどこでも構わないのですが、ヘッダ部分の最後あたりが分かりやすいかもしれません。
CSSでの装飾
最後にCSSでボタンデザインを定義します。
下記サンプルは閲覧の邪魔にならないようボタンを半透明としています。
また、レイヤーを使っていた場合にボタンが要素の下に潜りこむのを防ぐためにz-index:10を指定しています。
ボタン自体の大きさ・色・位置などのスタイルはお好みでということになりますが、とりあえず2つのパターンを載せておきます。
テキストリンク
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;
}
アイコンボタン
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を読み込む必要があります。
こちらは「超簡単!アイコンフォント Font Awesomeの使い方 」ご覧いただきたいと思いますが、とりあえず、下記のスタイルシートを読み込むことで使用可能です。
それぞれの表示サンプルです。
HTMLサイトへの実装
基本的な実装方法は上記のWordPressの場合と同じです。
まず、下記を追記してソース上のhead内にJqueryライブラリを読み込みます。(すでにライブラリを使用している場合は必要ありません)
先のスクリプトはWordPress同梱のJqueryを使用するために、$がjQueryとしていますので、WordPress以外では下記をお使いください。
$(function() {
var showFlag = false;
var topBtn = $('#page-top');
topBtn.css('bottom', '-100px');
var showFlag = false;
$(window).scroll(function () {
if ($(this).scrollTop() > -200) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'bottom' : '20px'}, 200);
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200);
}
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
補足
思ったよりも簡単に実装できますし、CSSとヘッダにさえ追記できれば、無料ブログでも使えます。
ユーザビリティ向上にも効果ありですので、ぜひ、チャレンジしてみてください。
もし、PC表示では不要ということであれば、WordPressではモバイル判定を行って条件分岐してもよいですし、単純にメディアクエリを使いスマホサイズ以外では非表示にしてもよいでしょう。
#page-top {display: none;}
}