「ページトップへ戻る」ボタンを設置するの続きなのですが、トップへ戻るボタンの表示を「CSS＋Webアイコンフォント（Font Awesome）」から「JavaScript（jQuery）＋画像ファイル」に変更しました。戻る動作を実行するスクリプト本体に変更はありません。
ボタンの画像は、icon rainbowの丸枠付きの矢印アイコン素材を使わせてもらいました。
（アイコン素材を無料（フリー）でダウンロードできるICOOON MONOもいいですね）
ボタンを表示するHTMLは次のとおりです（画像に「arrow」というidをつけました）。
（デザイン→カスタマイズ→フッタにコードを入力）
HTML
<div id="page-top">
<a id="move-page-top"><img id="arrow" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181107/20181107142014.png" alt="Icon rainbow" /></a>
</div>
ボタンの表示をマウスオーバーで切り替えるJavaScriptは次のとおりです。
（デザイン→カスタマイズ→フッタにコードを入力）
JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
$('<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181107/20181107142015.png">');
$('#arrow').hover(function() {
$(this).attr('src', 'https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181107/20181107142015.png');
}, function() {
$(this).attr('src', 'https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181107/20181107142014.png');
});
});
</script>
マウスオーバー後の画像を先読みすることで、ボタンの切り替えをスムーズにしています。
参考になるブログ・Webサイト
flatFlag - jQueryのhover()でマウスオーバーの処理
SOFTELメモ - 【jQuery】マウスオーバーで画像を切り替える
Web Design Leaves - jQuery で画像をプリロード
ボタンの表示位置などを指定するCSSは、以前より削って少なくしました。
（デザイン→カスタマイズ→「デザインCSS」にコードを入力）
CSS
#page-top {
display: none;
position: fixed;
right: 20px;
bottom: 40px;
}
#move-page-top {
cursor: pointer;
}
#arrow {
border: 0;
}
@media screen and (max-width:640px) {
#move-page-top {
display: none;
}
}
最後のほうの記述で、スマートフォンなどでボタンを表示させないようにしています。
はてなフォトライフに1.5KB程度のフルカラーのボタン画像（png）をアップロードしたのですが、仕様なのか、2.1KB程度にサイズが増えて、256色に変換されてしまいました...。
