はてなブログに「ページのトップに戻る」ボタンを追加する方法とカスタマイズの方法

　長い記事だと、ページのトップに戻ることが多々ありませんか？！
マウスのスクロールボタンで戻るのも面倒ですよね？！

そこで、利用者の利便性を向上させるために、ページトップに戻るボタンを追加することにしました。

　今回は、トモノリさんの下の記事を参考に

hatebumaru.hatenablog.com
スクリーン右下に、スムーズスクロールで「ページ上に戻る」ボタンを追加しました(^o^)v

ただし、使っているテーマと若干合わなかったので、
色合い、サイズ、位置の調整をしました(^^ゞ

全コードを下に掲載しましたので、各自で自分のテーマに沿った微調整を行ってください。
また、ボタンの形状の変更方法も記述しました。
ページのTOPに戻るボタン

① 設置は以下の３つのコードをコピペ。
② 設置したら、デザインのプレビューを見ながら微調整し、反映。
③ 反映後、実際にブログを表示して、最終調整。
以上で、完了ですね(^o^)v

設定→詳細設定→headに要素を追加

jQueryがhead似なかった別途追加してね(^^)/
最新バージョンならたぶん大丈夫だと思います。

jQueryの他に必要なフォントを以下で追加。
この中の１つをボタンとして使用します。

追加コード


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

デザイン→カスタマイズ→フッターに追加

"fa fa-chevron-circle-up fa-5x"が、使用するフォントです。

https://fontawesome.com/icons/chevron-circle-up?style=solid

これを変更することで、別のボタンを作成できます。

fontawesome.com

現在の表示位置が500ピクセルを超えたら、ボタンを表示するようになっています。
もし、変えたい場合は、"if (now>500){" の部分の500を変えます。

クリックしたら、遅いスピードでスクロールさせています。
もっと早くしたい場合は "slow" を ”normal” または ”fast” もしくはミリ秒単位に変更します。

追加コード


<!-- move to top -->
<div id="page-top">
  <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></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>
<!-- move to top -->

デザイン→カスタマイズ→CSSデザインに追加

コメントの箇所をみて、微調整します！
font-size は、xx-small としていますが、x-small 、small のどれかで十分でしょう。
更に小さくしたい場合は、ポイント (pt) やピクセル (px) 指定します。

追加コード


/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
  font-size: xx-small; /* 追加 ボタンの大きさの調整 */
}
#move-page-top{
  color:rgba(0,150,0,0.4); /* ボタンのカラー RGBA */
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:rgba(0,150,0,0.6); /* マウスホバー時のカラー RGBA */
}
@media only screen and (min-width: 400px){
  #page-top{
    right:50%;
    margin-right: -460px; /* 左右の位置調整 */
  }
}