続「ページトップへ戻る」ボタンの設置

hatenaロゴ

「ページトップへ戻る」ボタンを設置するの続きなのですが、トップへ戻るボタンの表示を「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色に変換されてしまいました...。

- 追記 -
コピペで簡単!はてなブログに上に戻るボタンを設置するを書きました。