「トップに戻る」ボタンでスマホでのユーザビリティアップ！
ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとびゅーんとページの初めに戻る。
そう。このページでも右下に表示されていますね。
今回はそのページ内リンクの実装方法を紹介します。
長いコンテンツでは非常に便利ですし、動きがあってちょっと楽しいです。
結構前から見かけていましたが、クライアントのスマホ想定が必須となった今こそユーザビリティ的にも活きてきそうな仕掛けです。
WordPressでは豊富なプラグインがあり、例にもれず、「Dynamic To Top Settings」などで実装可能ですが、なるべくプラグインを使わない軽快なサイトとするため、jqueryで実装してみたいと思います。
最後まで読んでいただければ、HTMLサイトへも実装できるはずです。
Jqueryライブラリの読み込みを確認する
WordPressではほとんどのテーマで同梱のJqueryが読み込まれます。
ソース上のhead内に以下のようにJqueryが読み込まれているか確認してください。
|
1 |
<script type='text/javascript' src='https://seous.info/wp-includes/js/jquery/jquery.js'></script> |
もし、読み込まれていない場合はhead内にwp_enqueue_script関数を追記して、Jqueryを読み込ます。
|
1 |
<?php wp_enqueue_script('jquery'); ?> |
スクリプトを追加する
Jqueryの読み込みを確認したら、head内に実行スクリプトを追加します。
このスクリプトではボタンリンク、および、アニメーションでの挙動を制御しています。もちろんファイルとして保存して、外部から読み込んでもよいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script type="text/javascript"> 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内であればどこでも構わないのですが、ヘッダー部分の最後あたりが分かりやすいかもしれません。
|
1 |
<p id="page-top"><a href="#top">PAGE TOP</a></p> |
CSSでの装飾
最後にCSSでボタンデザインを定義します。
下記サンプルは閲覧の邪魔にならないようボタンを半透明としています。
また、レイヤーを使っていた場合にボタンが要素の下に潜りこむのを防ぐためにz-index:10を指定しています。
ボタン自体の大きさ・色・位置などのスタイルはお好みでということになりますが、とりあえず2つのパターンを載せておきます。
パターン1（テキストボタン）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#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; } |
パターン2（アイコンボタン）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#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）を使ってみました。
ボタン自体のタグは下記をお使いください。
|
1 |
<p id="page-top"><a href="#top"><i class="fa fa-arrow-circle-up"></i></a></p> |
また、Font Awesomeを使用する場合はhead内にCSSを読み込む必要があります。
詳しくは「超簡単！アイコンフォント Font Awesomeの使い方 」ご覧ください。
|
1 |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"> |
それぞれの表示サンプルです。
パターン1
パターン2
HTMLサイトへの実装
基本的な実装方法は上記のWordPressの場合と同じです。
まず、下記を追記してソース上のhead内にJqueryライブラリを読み込みます。（すでにライブラリを使用している場合は必要ありません）
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
先のスクリプトはWordPress同梱のJqueryを使用するために、$がjQueryとなっていますので、WordPress以外では下記をお使いください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script type="text/javascript"> $(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表示では不要ということであれば、メディアクエリを使いスマホサイズ以外では非表示にしてもよいでしょう。
|
1 2 3 |
@media only screen and (min-width:769px) { #page-top {display: none;} } |
関連する記事
