【最終版】「ページトップへ戻る」ボタンの設置

hatenaロゴ

まだまだ、飽きもせず、はてなブログのカスタマイズを続けています。
「ページトップへ戻る」ボタンを設置する続「ページトップへ戻る」ボタンの設置に続く第3弾です。今回も「ページトップへ戻る」ボタンの設置について書いていきます。

    トップへ戻るボタンは、次の3つで構成されています。
  • ボタンを表示するためのHTML部分 → フッタにコードを入力
  • ボタンを装飾するためのCSS部分 → デザインCSSにコードを入力
  • ボタンを動かすためのJavascript部分 → フッタにコードを入力

今までは、それぞれを別々に入力(記述)していたのですが、JavaScript(jQuery)でひとまとめにすれば、入力が1箇所になっていいかなと思ってカスタマイズしてみました。

HTML部分は「 $('#main-inner').append(~);」で「<div id="main-inner">~</div>」で囲まれた一番最後に追記します。

CSS部分は 「$('head').append('~');」で「<head>~</head>」で囲まれた一番最後にに追記します。

Javascript部分はSyncer - 初心者でも分かる!jQuery「TOPへ戻るボタン」の作り方Code & Business - 書いて覚えるjQuery!「TOPに戻る」ボタン編カフーブログ - WEBページのスクロール最後に達したらjavascript発動(Android/iPhone対応)を参考に設置しました。

コードは次のとおり(デザイン設定→カスタマイズ→フッタにコードを入力)

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script type="text/javascript">
$(function() {
    /* トップへ戻るボタンのcss */
    $('head').append('<style type="text/css">#page-top { display: none; position: fixed; right: 20px; bottom: 20px; margin: 0; padding: 0; text-align: center; } #move-page-top { color: rgba(0, 0, 0, 0.4); text-decoration: none; display: block; cursor: pointer; } #move-page-top:hover { color: rgba(0, 0, 0, 0.6); }</style>');

    /* トップへ戻るボタンのhtml */
    $('#main-inner').append('<div id="page-top"><a id="move-page-top" title="ページの先頭へ"><i class="fa fa-arrow-circle-o-up fa-5x"></i></a></div>');

    /* トップへ戻るボタンのJavaScript */
    var timeOut = null;
    $(window).scroll(function() {
        if(timeOut == null) {
            timeOut = setTimeout(function() {
                var element = $('#page-top');
                var visible = element.is(':visible');
                var scrHeight = $(window).scrollTop();
                var winHeight = $(window).height();
                var pageHeight = $(document).height();
                if(scrHeight >= winHeight || (pageHeight - winHeight) <= scrHeight) {
                    if(!visible) {
                        element.fadeIn('slow');
                    }
                }
                else {
                    element.fadeOut('slow');
                }
                timeOut = null;
            }, 1000 / 30);
        }
    });
    $('#move-page-top').click(function() {
        $('body, html').animate({scrollTop: 0}, 'slow');
    });
});
</script>

ほぼ、Syncer(シンカー)さんのスクリプトそのままですが、ブラウザの1画面分以上スクロールするか、ブラウザの1画面分スクロールする前にページの下まできたら、トップへ戻るボタンを表示するようにしました(「最下部まで来たらボタンを消す」処理は削除)。

トップへ戻るボタンの無駄な処理を防ぐ工夫(過剰な処理を防ごう)がとても素晴らしい。