https://simadzu.hatenablog.com/entry/pagetop-img

はてなロゴ

このブログでは、はてなのアイコンフォントを使って「上に戻るボタン」を設置していましたが、少し飽きてしまったのと、コードをシンプルにしたかったので、画像でボタンを設置することにしました。

（次のコードをすべてコピーして「デザイン→カスタマイズ→フッタ」に貼り付けます）

<!-- 上に戻るボタンのHTML -->
<a id="pagetop" href="" onclick="$('html, body').animate({scrollTop: 0}, 'slow'); return false;" title="上に戻る">
    <img src="画像のURL（画像アドレス）" alt="上に戻る">
</a>

<!-- 上に戻るボタンのCSS -->
<style>
#pagetop {
    position: fixed;
    right: 32px;
    bottom: 54px;
}
</style>

「上に戻るボタンのHTML」（<a id="page-top">～</a>で囲まれた部分）でボタンを表示し、ボタンのクリックで上に戻ります。

ボタンにする画像はあらかじめはてなフォトライフなどにアップロードしておき、imgタグに画像のURL（画像アドレス）を指定します。
※ 画像をアップロードするときは（ブログが重くならないように）画像をソフトやWebサービス（自分はWindows用ソフトのRalphaを使ってます）で縮小します。

上に戻るボタンの動作はHTMLのonclick属性でjQueryの「animate()」を設定しているのでスムーズにスクロールします。

※ 「$('html, body')」 → ブラウザがWebKitならbody、それ以外はhtmlに移動。
「scrollTop: 0」 → スクロールの位置は上から0pxの位置で停止。
「slow」 → アニメスピードは600ミリ秒（fastは200ミリ秒、省略で400ミリ秒）。
アニメタイミングは省略しているのでswing（最初と最後がゆっくりで途中が速め）。

onclick属性を使った「上へ戻る」スクロール

バッドノウハウ的な。

また、JavaScriptが無効なときは「href=""」で現在のページを更新（移動）しますが、JavaScriptが有効なときは「return false」でページ遷移を無効（onclick属性のスムーズスクロールは有効で「href=""」のページの更新は無効）にしています。

aタグでonclick属性を使う際にhrefのページ遷移を無効化する方法

今回はaタグにonclick属性を付加しJavascriptを動かす際に、hrefによるページ遷移をしないようにするための記述方法を紹介します。これ、使う度に忘れてしまっていて毎回調べるんですよね…。

「上に戻るボタンのCSS」（<style>～</style>で囲まれた部分）でボタンの位置を固定します。
※ フッタではなくデザインCSS（デザイン→カスタマイズ→デザインCSS）に貼り付ける場合は<style>と</style>の記述は不要です。

なお、ボタンの表示にJavaScriptを使わないので、スクロールしてふわっと表示させることはできません。
（JavaScriptを使ってまでボタンをスクロールでふわっと表示させなくてもといい思う）

CSSで画像の透明度を変えたり、マウスオーバー時に別の画像に切り替えたり、工夫しだいでいろいろできそうですね。