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

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

2015/03/18
タグ: ユーザビリティ, 中級

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

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つのパターンを載せておきます。

テキストリンク

#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）を使ってみました。
この場合は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>

超簡単！アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。 ウェブフォントの登場によって、描画速度が速く手軽に挿入できるテキストフォントとして使用できるようになりました。 メニューや見出しなど、重宝するケースは非常に多いですよね。 もちろん、ウェブフォントですから、iPh […]

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

テキストのリンク

アイコンリンク

補足

思ったよりも簡単に実装できたのではないでしょうか。
基本的にはjQueryライブラリの読み込みとCSSとヘッダにさえ追記できれば、静的なHTMLサイトや無料ブログでも使えます。

WordPressでのjQuery取り扱いの基本

WordPressにはデフォルトでjQueryライブラリが用意されています。 こちらを使わずにCDNなどから通常のライブラリを読み込むこともできますが、実際にはこれを制御するのはWordPress本体ではなく、テーマです。 そして、ほとんどのテーマでこの同梱ラ […]

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

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

ユーザビリティ向上にも効果あるはずなので、ぜひ、チャレンジしてみてください。