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

ヘッダ画像

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

2015/03/18 2017/08/02
タグ: ,

ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビューンとページの初めに戻る。
そう、このページでも右下に表示されていますね。
今回はそのページ内リンクの実装方法を紹介します。

長いコンテンツでは非常に便利ですし、動きがあってちょっと楽しいです。
結構前から見かけていましたが、クライアントのスマホ想定が必須となった今こそユーザビリティ的にも活きてきそうな仕掛けです。
WordPressでは例にもれず「Dynamic To Top Settings」などのプラグインで実装可能ですが、今回はjqueryで実装してみたいと思います。
最後まで読んでいただければ、静的なHTMLサイトへも実装できるはずです。

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 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内であればどこでも構わないのですが、ヘッダ部分の最後あたりが分かりやすいかもしれません。

<p id="page-top"><a href="#top">PAGE TOP</a></p>

CSSでの装飾

最後にCSSでボタンデザインを定義します。
下記サンプルは閲覧の邪魔にならないようボタンを半透明としています。
また、レイヤーを使っていた場合にボタンが要素の下に潜りこむのを防ぐためにz-index:10を指定しています。
ボタン自体の大きさ・色・位置などのスタイルはお好みでということになりますが、とりあえず2つのパターンを載せておきます。

テキストリンク

#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;
}

アイコンボタン

#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）を使ってみました。
ボタン自体のタグは下記をお使いください。

<p id="page-top"><a href="#top"><i class="fa fa-arrow-circle-up"></i></a></p>

また、Font Awesomeを使用する場合はhead内にCSSを読み込む必要があります。
こちらは「超簡単！アイコンフォント Font Awesomeの使い方 」ご覧いただきたいと思いますが、とりあえず、下記のスタイルシートを読み込むことで使用可能です。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">

それぞれの表示サンプルです。

テキストのリンク


アイコンリンク

HTMLサイトへの実装

基本的な実装方法は上記のWordPressの場合と同じです。
まず、下記を追記してソース上のhead内にJqueryライブラリを読み込みます。（すでにライブラリを使用している場合は必要ありません）

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

先のスクリプトはWordPress同梱のJqueryを使用するために、$がjQueryとしていますので、WordPress以外では下記をお使いください。

<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表示では不要ということであれば、WordPressではモバイル判定を行って条件分岐してもよいですし、単純にメディアクエリを使いスマホサイズ以外では非表示にしてもよいでしょう。

@media only screen and (min-width:769px) {
#page-top {display: none;}
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressで現在のページ表示に使用しているテンプレートをすべて知る

WordPressでは、投稿タイプに応じてデフォルトの構成テンプレートが適用されます。 ただし、プラ […]

メールフォームプロCGIをWordPressに設置

WordPressのフォームについて、定番のContact Form7をはじめ、いろいろとプラグイン […]

ページ内目次を見出しタグから自動生成

Wikiをはじめ、記事の先頭にリストの目次（インデックス）をつけているサイトを目にしたことがあると思 […]

マルチサイト構築方法まとめ

WordPressバージョン3.0以降に搭載されたマルチサイト機能の構築方法についてまとめます。 マ […]