Home
Menu
Side
Twitter
Top
ホーム / Blogger | ブログカスタマイズ |

簡単に設置できる！Blogger ブログでトップへ戻るボタンを設置する

2019/07/18

Blogger ブログカスタマイズ

こんにちは HARU（ @HARU ）です。

今回は Blogger ブログで簡単に設置することができるトップへ戻るボタンの作成方法を紹介しようと思います。

何気なく、どこのブログにも設置されているボタンですが、あるのとないのでは利便性が全然違います。

また、目次を設置しているブログでは、大体がページのトップにある目次まで戻れるボタンがあった方がいいでしょう。

今回設置するボタンはクリックするとぬるっとスクロールするタイプのボタンです。

目次リンクのようなページ内リンクもスクロールアニメーションが発生するようになるので、目次とセットで設置しておくことをオススメします。

目次を追加する
注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の関連記事を参照してください。

参考

JQuery の導入

JQuery の導入をしていない場合、以下の script を <head> の直下に記述します。


  <!-- JQuery -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

Font Awesome の導入

Font Awesome を導入していない場合、以下のコードを <head> の直下に記述します。

<link href='https://use.fontawesome.com/releases/v5.6.4/css/all.css' rel='stylesheet'/>

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

QooQ のテンプレートを使っている人は個別記事近くに記述すると、HTML を編集するときにわかりやすいでしょう。


  /*  トップへ戻る  */
  #page_top{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: #3f98ef;
    opacity: 0.6;
  }
  #page_top a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }
  #page_top a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }

HTML 編集

以下のコードを </body> の直上に記述します。


  <!-- topへ戻る -->
  <div id='page_top'><a href='#'/></div>

ページ内リンクスクロールアニメーション Script

ページ内リンクをスムースにスクロールするため、以下の Script を </body> の直上に記述します。


  <!-- ページ内リンクスクロール -->
  <script>
    jQuery(function() {
      var pagetop = $('#page_top');
      pagetop.hide();
      $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
          pagetop.fadeIn();
        } else {
          pagetop.fadeOut();
        }
      });
      $('a[href^="#"]').click(function(){
        var headerHight = 0;  //ヘッダーの高さpx
        var time = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" ? 'html' : href);
        var distance = target.offset().top-headerHight;
        $("html, body").animate({scrollTop:distance}, time, "swing");
        return false;
      });
    });
  </script>

QooQ