jQueryで作る「トップに戻る」ボタンをリストを使って拡張する

スクロール途中で下から「すっ」と現れるコンテナです。いわゆる「トップに戻る」ボタンのことですが、丸ごとリストに入れてみました。

戻るボタンはもちろん、ソーシャルボタンやお知らせなど、お好みで色々と詰め込めます。

あっちもこっちもバラバラで表示するより一体感があるのと、途中で違う物に差し替えるときの保守性に優れてる気がします。

スクロール途中から現れる下部固定のコンテナ

スクロール途中で現れる「トップに戻る」ボタンは小さなDIVに入ってることが多いでしょうか。これをリストに入れると他の機能も追加しやすくなるので便利です。

HTML

何はなくとも「トップに戻る」ボタンをリストに入れます。

あとは隙間と相談しつつ、TwitterやFacebookなどのシェアボタンを入れたりオススメページへのリンクを張ったりお好みで。

【HTML】
<div id="footerBar">
<ul>
<li><a href="#" title="Twitterでシェア">twitter</a></li>
<li><a href="#" title="Facebookでシェア">Facebook</a></li>
<li id="pagetop"><a href="#header" title="このページの先頭へ / Go To Top">▲</a></li>
</ul>
</div>


CSS

CSSはお好みで。サンプルソースではアイキャッチ風の見た目になります。リストの各項目は右揃えになってます。

【CSS】
#footerBar{
  width: 100%;
  height: 1.6em;
  position: fixed;
  bottom: -1.6em;
  z-index: 100;
  line-height: 1.6em;
  font-size: 1.4em;
  letter-spacing: 2px;
  background:#CCC;
  }
#footerBar ul{
  list-style: none;
  display:block;
  margin: 0 1em;
  padding: 0;
  height: 1.6em;
  }
#footerBar li { float: right; }
#footerBar li a { margin: 0 0.1em; }
#footerBar:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: " ";
  }
#pagetop a{ margin-left: 1em; }


jQuery

【jQuery】
$(document).ready(function() {
  var flag = false;
  var footerBar = $('#footerBar'); //動かす全体の要素
  var pagetop = $('#pagetop'); //戻るボタン
  $(window).scroll(function () {
    if ($(this).scrollTop() > 700) {
      if (flag == false) {
        flag = true;
        footerBar.stop().animate({ 'bottom': '0' }, 200);
     }
    } else {
      if (flag) {
        flag = false;
        footerBar.stop().animate({ 'bottom': '-40px' }, 200);
      }
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500);
      return false;
    });
});


500などの数字はスクロール速度です。変更すると動作の印象が変わります。

slow / fast といったざっくりパラメータを指定することも出来ます。
jQuery：スクロールで表示されるページトップの実装方法 | NxWorld

おわりに

試しにやってみたら一応便利だったのですが、人によっては画面が狭く感じるので工夫が必要かも知れません。モバイルでは上寄せ・PCでは左右寄せにするととスッキリしそうです。

ボタン本体のコーディング記事に反してカスタマイズ話を書いてる人が意外と少ない気がしたので、にょろっと投下してみます。

アイディアメモとしてご活用下さい。(・∀・)/