Bloggerに「TOPに戻る」ボタンを設定する方法

2024年2月27日

記事内に商品プロモーションが含まれる場合があります

ブログのカスタマイズをちょこちょこしています。

今回は「TOPに戻る」ボタンを追加しました。

参考にしたのはBloggerの記事ではなく、はてなブログのこちらの記事。

参考：はてなブログにTOPに戻るボタンを追加する方法

コードは上記の記事のをほぼそのままお借りしています。

それをBloggerで利用する方法を書きました。

Font Awesomeを利用しているのでまず、<head>内に、

XML

<link href=”https://use.fontawesome.com/releases/v6.0.0/css/all.css” rel=”stylesheet”>

を貼りつけます。（※バージョンが変わるので、最新版はGet Started with Font Awesomeで確認してください。）

XML

<div id="page-top">
  <a id="move-page-top"><i class="fa fa-angle-up"></i></a>
</div>
<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>

貼り付ける位置は</footer>の下です。

CSSは好みがあると思いますが、私は以下のようにしました。

CSS

#page-top {
    display: none;
    position: fixed;
    right: 30px;
    bottom: 30px;
    text-align: center;
    z-index: 0;
    opacity: 0.9;
}
#move-page-top {
    color: #ffffff; /*文字色*/
    background-color: #333333; /*背景色*/
    font-size: 300%;
    display: block;
    text-decoration: none;
    cursor: pointer;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

以上で、「TOPに戻る」ボタンの作成ができたかと思います。

より詳細に知りたい方は、元記事をご参照ください。