Bloggerテンプレート自作 #24：ページトップボタンを作る

前回の「最新記事ガジェットを作る」に引き続き、今回は「ページトップアイコンを作る」を実践してみようと思う。

ページトップボタン（ページトップアイコン）とは、ページ内に追従する形で配置されたアイコンをクリックすることでページトップまで戻れるようにするアイコンのことで、ブログサイトには基本的に設置されている。というわけで、今回はこの「ページトップボタン」の作り方をまとめることにする。


作業工程


HTMLを作る


<!-- ページトップボタン -->
<div class="page-top-button">
  <a href="#"><i class="fa fa-angle-double-up" /></a>
</div>

</body>

とりあえずHTMLはこれだけ。これを</body>の真上に書けばOK。

CSSを作る


Bloggerテンプレート自作 #24：ページトップボタンを作る
PC版
Bloggerテンプレート自作 #24：ページトップボタンを作る
スマホ版

/* ------------------------------------------------------------------------------------------------------
    ページトップボタン
------------------------------------------------------------------------------------------------------ */

.page-top-button {
  display: block;
  position: fixed;
  bottom: 45px;
  right: 4%;
  z-index: 99;
}

.page-top-button a {
  font-size: 25px;
  font-weight: 900;
  color: #fff;
  background: #333;
  padding: 5px 15px;
  opacity: 0.8;
}

.page-top-button a:hover {
  color: #eee;
  background: #666;
}

/* レスポンシブ設定 */

@media screen and (max-width: 560px) {
  .page-top-button {
    top: 85%;
    right: -8px;
  }
  .page-top-button a {
    font-size: 20px;
    padding: 6px 12px;
    border-radius: 50% 0 0 50%;
    color: #333;
    background: #ccc;
    opacity: 0.5;
    z-index: 99;
  }
}

こんな感じのCSSを書くと、画像のようなデザインになる。

今回はレスポンシブで切り替わるようにしたが、レスポンシブがなくてもスマホ表示はされる。

jQueryを追加する


<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" />

<script>
  //<![CDATA[
    // ページトップアイコンを隠す
    $('.page-top-button').hide();

    // ページトップボタン
    $(window).scroll(function() {
      var now = $(window).scrollTop();
      // トップから200px以下になるとページトップアイコンを表示
      if (now > 200) {
        $('.page-top-button').fadeIn('slow');
      }
      // 上記以外の場合は消す
      else {
        $('.page-top-button').fadeOut('slow');
      }
    });

    // ページ内のスムーススクロール設定
    $('a[href^="#"]').click(function() {
        // スクロールの速度
        var speed = 200; // ミリ秒
        // アンカーの値取得
        var href= $(this).attr("href");
        // 移動先を取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        // 移動先を数値で取得
        var position = target.offset().top;
        // スムーススクロール
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
      });
    //]]>
</script>

今回はjQueryを使ってページトップアイコンの動きを設定する。

とりあえず、上からページトップでアイコンを消す、スクロール量が一定値に達するとアイコンが表示される、ページトップに戻る際にスムーズにスクロールさせる、という処理で、細かい説明はコメントを見てもらえば分かると思う。

スムーススクロールは上に戻る際に、下から上に動くように戻るという処理になるが、何の動きもなくページトップに戻るようにしたい場合は、この「ページ内のスムーススクロール設定」内の処理を削除してしまえばいい。