ページの先頭へ戻るボタンの位置と使い勝手について

  • このエントリーをはてなブックマークに追加

どの位置からでも先頭に戻れるように配置する

Webサイトを見ていると、フッターに「ページの先頭へ戻る」ボタンが設置されているのをよく目にします。
これは一番下までスクロールした後、別のページへ移動する為のボタンが上部にある時など、ページの先頭へ簡単に戻りたい時に便利なボタンですね。
ですがこの位置は使い勝手がいいのでしょうか?

誰もが自分のWebサイトを隅々まで見てもらいたいと思っていますが、実際にはそういう事はありません。
中にはそれほど興味のない方や、ある部分だけが強烈に気になって、そこだけを見て問い合わせてくれる方もいるでしょう。
途中まで見て「なんだか違うな」と思うと別のWebサイトに行ってしまうかもしれません。

ページの下部に「先頭へ戻るボタン」を設置した場合、そのボタンを押す為には最後までページを見てもらわなければなりません。
もし小さなボタンであるなら、注意深く見てもらわなければ見落とされてしまいます。
使い勝手が良くなるようにと思って設置したボタンでも、見つからない・押されないでは意味がありませんね。

ではどうしたらいいのでしょうか・・・
それは、「常にページの下部に表示させておく」という手段で解決できますね。

スクロールしても付いてくるように、ページの下にボタンを固定表示させることで、どの位置からでもページの先頭へ戻る事ができますね。
Webサイトを下まですべて見なくてもボタンが常に定位置にあるので、操作もしやすいです。

ただしこの手段だと、ページの先頭を表示しているときにも「ページの先頭へ戻る」ボタンが出てしまっているので、なんだかおかしいですね。
ページの先頭を見ている時にページの先頭へ戻るボタンを押しても、何も変化が起こらないので尚更おかしな感じに見えてきます。

そんな時はJavaScriptで解決しましょう。

ある程度スクロールさせたらclassを付与させて制御する

最初はCSSを使って非表示とし、JavaScriptでスクロール量が一定になった時、表示させる指定を書いたclass名を付与させる方法でできます。
JavaScriptはこんな感じ・・・

$(function(){
  var topBtn = $(‘#pageTop‘);
    var showFlag = false;
    //画面上部から200pxに達したらactive
    $(window).scroll(function () {
      if ($(this).scrollTop() > 200) {
        if (showFlag == false) {
          showFlag = true;
          topBtn.addClass(‘show’);
        }
        } else {
        if (showFlag) {
          showFlag = false;
          topBtn.removeClass(‘show’);
      }
    }
  });
});

#pageTopとなっている部分は、ページの先頭へ戻るボタンに付けたid名(もしくはclass名)に変更してください。
.scrollTop() > 200の「200」はスクロールした量を表しています。この場合は200pxスクロールされた時です。

このようにしてあげる事で、最初はページの先頭へ戻るボタンが非表示となり、200px分スクロールされたタイミングで表示させることができるようになります。
ページの先頭を見ているのに、ページの先頭へ戻るボタンが出てしまっている・・・という事を避ける事ができますのでオススメです。

まとめ

「ページの先頭へ戻るボタン」など、見た方の使い勝手に配慮するのは良い事ですが、そのボタンが操作しにくいとか、見つけられなければボタンを付けた意味が薄まります。
ボタンを付けて満足・・・ではなく、使いやすいか?ボタンはすぐに見つけられるか?と、もっと掘り下げて考えていくようにしましょう。

  • このエントリーをはてなブックマークに追加

新潟県地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301