投稿者 天宮 司 Bloggerカスタマイズ

Bloggerカスタマイズ講座11：ページ上部へ戻るボタン設置

天宮です。


今回は、ブログ記事が長くなった場合に便利な
ページ途中から上部へ簡単に戻るためのボタンを設置してみます。

Bloggerにページ上部へ戻るボタンを設置

javascriptを利用してスムーズに

上部へスクロールさせるようにします。

テーマを開き、まずは </html>　を検索

</html>のすぐ上の行に下記を追加

<p class='pagetop'><a href='#container'><i class='fa fa-caret-square-o-up'/></a></p>

次に </body>　を検索

</body>のすぐ上の行に下記を追加

<!--ページトップのコード-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>

$(function() {

    var topBtn = $('.pagetop');    

    topBtn.hide();

    $(window).scroll(function () {

        if ($(this).scrollTop() > 800) { <!--表示開始の調整-->

            topBtn.fadeIn();

        } else {

            topBtn.fadeOut();

        }

    });

    topBtn.click(function () {

        $('body,  html').animate({

            scrollTop: 0

        },   400); <!--スクロール速度の調整-->

        return false;

    });

});

</script>

<!--ページトップのコード-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
$(function() {
    var topBtn = $('.pagetop');    
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 800) { <!--表示開始の調整-->
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,  html').animate({
            scrollTop: 0
        },   400); <!--スクロール速度の調整-->
        return false;
    });
});
</script>
  </body>
  <!--Facebookのコード  消さないでね-->
  <div id='fb-root'/>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = &quot;//connect.facebook.net/ja_JP/sdk.js#xfbml=1&amp;version=v2.0&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
 <script type='text/javascript'>
                          $(document).ready(function(){ 
                        $(&#39;#MBT-google-ad&#39;).insertBefore($(&#39;a[name=&quot;more&quot;]&#39;));
                              }); 
                        </script>
<p class='pagetop'><a href='#container'><i class='fa fa-caret-square-o-up'/></a></p>
</html>

ここまでで一応ボタンの表示は出ます、

800の数字の部分を小さくすると

早めにボタンが表示して、

400の数字を小さくすると

上部へスクロールする速度がはやくなります。

CSSを追加し上部へ戻るボタンのデザインを変更

続いてCSSにボタンデザインのコードを追加しましょう。

レスポンシブより上に追加してもらえたら

どこでも良いのですが、

とりあえず .button-toggle　を検索

メニューを開くボタンの行のすぐ上に下記を追加

/*   TOPスクロール   */     

.pagetop {

    display: none;

    position: fixed;

    bottom: 35px;

    right: 18px;

}

.pagetop a {

    display: block;

    text-align: center;

    color: #666;

    font-size: 40px;

    text-decoration: none;

    padding: 0;

    filter:alpha(opacity=50);

    -moz-opacity: 0.5;

    opacity: 0.5;

}

/*   TOPスクロール   */     
.pagetop {
    display: none;
    position: fixed;
    bottom: 35px;
    right: 18px;
}
.pagetop a {
    display: block;
    text-align: center;
    color: #666;
    font-size: 40px;
    text-decoration: none;
    padding: 0;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
/*  メニューを開くボタン  */
.button-toggle{

表示を確認してみましょう。

テスト用に投稿した記事があまりに短いと

スクロールボタンが表示される位置まで

いかない場合がありますから注意して下さい。