まだまだ、飽きもせず、はてなブログのカスタマイズを続けています。
「ページトップへ戻る」ボタンを設置する、続「ページトップへ戻る」ボタンの設置に続く第3弾です。今回も「ページトップへ戻る」ボタンの設置について書いていきます。
- トップへ戻るボタンは、次の3つで構成されています。
- ボタンを表示するためのHTML部分 → フッタにコードを入力
- ボタンを装飾するためのCSS部分 → デザインCSSにコードを入力
- ボタンを動かすためのJavascript部分 → フッタにコードを入力
今までは、それぞれを別々に入力（記述）していたのですが、JavaScript（jQuery）でひとまとめにすると、入力が1箇所になっていいかなと思ってカスタマイズしてみました。
HTML部分は「$('body').append～」で「<body>～</body>」の最後に書き込みます。
CSS部分は 「$('head').append～」で「<head>～</head>」の最後に書き込みます。
Javascript部分はSyncer - 初心者でも分かる！jQuery「TOPへ戻るボタン」の作り方とCode & Business - 書いて覚えるjQuery！「TOPに戻る」ボタン編、カフーブログ - WEBページのスクロール最後に達したらjavascript発動（Android/iPhone対応）を参考に設置しました。
（デザイン→カスタマイズ→フッタにコードを入力）
JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
/* トップへ戻るボタンのcss */
$('head').append('<style>#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 */
$('body').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;
}, 500);
}
});
$('#move-page-top').click(function() {
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
ほぼ、Syncer（シンカー）さんのスクリプトそのままですが、ブラウザの1画面分以上スクロールするか、ブラウザの1画面分スクロールする前にページの下まできたら、トップへ戻るボタンを表示するようにしました（「最下部まで来たらボタンを消す」処理は削除）。
トップへ戻るボタンの無駄な処理を防ぐ工夫（過剰な処理を防ごう）がとてもすばらしい。
WebアイコンフォントのFont Awesomeが読み込まれないとアイコンは表示されません。
（設定→詳細設定→「<head>要素にメタデータを追加」にコードを入力）
CSS
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
