【Blogger用】トップへ戻るボタンの追加

Bloggerに「トップへ戻る」ボタンを追加する方法

無料で使えるGoogleのブログサービス「Blogger」に、標準機能にはない「トップへ戻る」ボタンを追加する方法の紹介です。設定画面と一緒に分かりやすく簡単に解説しています。

www.ma-chanblog.com

    <!-- JQuery -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
 
    <!-- 「トップへ戻る」用アイコンフォント Font Awesome -->
    <link href='https://use.fontawesome.com/releases/v6.1.1/css/all.css' rel='stylesheet'/>

    <!-- topへ戻る ここから -->
    <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 time = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" ? 'html' : href);
        var distance = target.offset().top;
        $("html, body").animate({scrollTop:distance}, time, "swing");
        return false;
      });
    });
    </script>
 
    <div id='page_top'><a href='#'/></div>
    <!-- topへ戻る ここまで -->

/* トップに戻る ここから */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #dbccf7; /* ボタンの色を指定 */
  opacity: 0.8; /* 透明度の設定 */
  border-radius: 50%;
  z-index: 10;	/* 表示優先度 */
}
#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: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/* /トップに戻る ここまで */