ブログデザイン備忘録 ~トップへ戻るボタン

1. ページトップへ戻る

　ページをスクロールしたときにページ右下のボタンをクリックするとトップに戻るボタンを追加した。Googleで検索すると、例えば【はてなブログ】初心者でも簡単！上に戻るボタンを簡単に設置する方法 - ネコ部長のお役立ちブログにあるようにFontAwesomeとjQueryを用いる方法が多くのサイトで紹介されている。 FontAwesomeとは多数のロゴ・アイコンを扱っているサービスで、使い方は【保存版】Font Awesomeの使い方：Webアイコンフォントを使おうを参考にするとよい。 Webページ等に埋め込むためにはFont Awesomeからユーザ登録が必要で、無料と有料のロゴ・アイコンがあるがたいていの場合無料のもので十分に事足りる。もちろんFontAwesomeを使わず自分で画像・ロゴを用意してもよい。あとトップに戻るだけであればCSSだけでも可能だが、スクロール途中からボタンを出したり、ゆっくりとスクロールさせるためにjQueryが使われている。

2. HTMLの記述

まずjQueryとFontAwesomeを使えるようにするには、デザイン設定-カスタマイズ-ヘッダ-タイトル下に次のHTMLコードを記述する。なおのxxxxxxxxxx.jsはFontAwesomeのユーザ登録時に発番される番号になる。

<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

次にフッタにFontAwesomeのアイコンを用いたボタンの設置とボタンを動作させるたのjQueryのスクリプトを記述する。アイコンはfas fa-chevron-circle-upを指定し、fa-3xはアイコンサイズを指定している。

<!-- ボタンおよびFontawesomeのアイコン埋め込み-->
<div id="page-top" title="トップへ">
  <a id="move-page-top"><i class="fas fa-chevron-circle-up fa-3x"></i></a>
</div>
<!-- jQueryによるボタン動作-->
<script>
  $(window).scroll(function(){
    var now = $(window).scrollTop();
    if(now > 500){
      $("#page-top").fadeIn("slow");
    }else{
      $("#page-top").fadeOut("slow");
    }
  });
  $("#move-page-top").click(function(){
    $("html,body").animate({scrollTop:0},"slow");
  });
</script>

jQueryの部分はスクロール位置が500以上だとボタンが現れ、それ以外はボタンは現れない。またボタンをクリックするとスクロール位置0にゆっくり移動するという処理になっている。 ところで、jQueryを使わずHTMLのみでボタンを作成するには、リンク先をページ内の(HTMLコードの)ID番号などを設定すればよい。 例えば、

<div id="page-top" title="トップへ">
  <a href="#blog-title"><i class="fas fa-chevron-circle-up fa-3x"></i></a>
</div>

3. CSS

　次にデザインCSSに以下のコードを記述する。

/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
}

#page-top a{
  color: #3f98ef; /*アイコンの色設定*/
}

#move-page-top{
  color:rgba(0,0,0,0.4);
  text-decoration:none;
  display:block;
  cursor:pointer;
}