どの位置からでも先頭に戻れるように配置する
Webサイトを見ていると、フッターに「ページの先頭へ戻る」ボタンが設置されているのをよく目にします。
これは一番下までスクロールした後、別のページへ移動する為のボタンが上部にある時など、ページの先頭へ簡単に戻りたい時に便利なボタンですね。
ですがこの位置は使い勝手がいいのでしょうか？
誰もが自分のWebサイトを隅々まで見てもらいたいと思っていますが、実際にはそういう事はありません。
中にはそれほど興味のない方や、ある部分だけが強烈に気になって、そこだけを見て問い合わせてくれる方もいるでしょう。
途中まで見て「なんだか違うな」と思うと別のWebサイトに行ってしまうかもしれません。
ページの下部に「先頭へ戻るボタン」を設置した場合、そのボタンを押す為には最後までページを見てもらわなければなりません。
もし小さなボタンであるなら、注意深く見てもらわなければ見落とされてしまいます。
使い勝手が良くなるようにと思って設置したボタンでも、見つからない・押されないでは意味がありませんね。
ではどうしたらいいのでしょうか・・・
それは、「常にページの下部に表示させておく」という手段で解決できますね。
スクロールしても付いてくるように、ページの下にボタンを固定表示させることで、どの位置からでもページの先頭へ戻る事ができますね。
Webサイトを下まですべて見なくてもボタンが常に定位置にあるので、操作もしやすいです。
ただしこの手段だと、ページの先頭を表示しているときにも「ページの先頭へ戻る」ボタンが出てしまっているので、なんだかおかしいですね。
ページの先頭を見ている時にページの先頭へ戻るボタンを押しても、何も変化が起こらないので尚更おかしな感じに見えてきます。
そんな時はJavaScriptで解決しましょう。
ある程度スクロールさせたらclassを付与させて制御する
最初はCSSを使って非表示とし、JavaScriptでスクロール量が一定になった時、表示させる指定を書いたclass名を付与させる方法でできます。
JavaScriptはこんな感じ・・・
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分スクロールされたタイミングで表示させることができるようになります。
ページの先頭を見ているのに、ページの先頭へ戻るボタンが出てしまっている・・・という事を避ける事ができますのでオススメです。
まとめ
「ページの先頭へ戻るボタン」など、見た方の使い勝手に配慮するのは良い事ですが、そのボタンが操作しにくいとか、見つけられなければボタンを付けた意味が薄まります。
ボタンを付けて満足・・・ではなく、使いやすいか？ボタンはすぐに見つけられるか？と、もっと掘り下げて考えていくようにしましょう。
