ブログのカスタマイズをちょこちょこしています。
今回は「TOPに戻る」ボタンを追加しました。

参考にしたのはBloggerの記事ではなく、はてなブログのこちらの記事。
参考:はてなブログにTOPに戻るボタンを追加する方法 – TASK NOTES
コードは上記の記事のをほぼそのままお借りしています。
それをBloggerで利用する方法を書きました。
Font Awesomeを利用しているのでまず、<head>
内に、
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
を貼りつけます。(※バージョンが変わるので、最新版はGet Started with Font Awesomeで確認してください。)
<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は好みがあると思いますが、私は以下のようにしました。
#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に戻る」ボタンの作成ができたかと思います。
より詳細に知りたい方は、元記事をご参照ください。