Webページのナビゲーションとして、そこかしこで見掛けるようになった「トップページへ戻る」ボタン。
ページを下にスクロールさせるとぼわ〜ん出現して、クリック（タップ）するとぐい〜〜ん！と上に戻るというやつです。ボタンはCSSとFont Awesome、出現とクリック時のエフェクト動作はjQueryを使っているだけなので、様々なブログやWebサイトに簡単に導入することができます。
目次
jQueryとFont Awesomeを読み込む
<head> ~ </head>内に追加します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
jQueryやFont Awesomeのライブラリを自分のサイトに保存して読み込む場合は、URLを変更して下さい。
ヘッダーにJavaScriptコードを追加する
<head> ~ </head>内に追加します。
<script>
$(document).ready(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 700);
return false;
});
});
</script>
100の値はスクロールでボタンを表示させるpx数です。150にすると150px下にスクロールした時に表示するようになります。700の値はトップに戻るエフェクトスクロールの速度です。値が少ない方が速度が速くなります。お好みで調節しましょう。
CSSにコードを追加する
デザインや色はお好みで変更して下さい。
.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 15px;
}
.pagetop a {
display: block;
background-color: #ccc;
text-align: center;
color: #222;
font-size: 12px;
text-decoration: none;
padding: 5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.pagetop a:hover {
display: block;
background-color: #b2d1fb;
text-align: center;
color: #fff;
font-size: 12px;
text-decoration: none;
padding:5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
HTMLにコードを追加する
トップに戻るボタンのコードは、フッター周辺に追加します。
デザインによってはフッターの下に回り込んでしまってボタンが押せなくなることもありますが、その際は追加する位置を変更してみて下さい。
<p class="pagetop"><a href="#wrap"><i class="fa fa-chevron-up"></i></a></p>
ボタンのアイコンを変更するには、fa fa-chevron-up の部分を変更します。
アイコンデザインの種類はFont Awesome Iconsで確認できます。