webデザイナーがコーディングをする時に必ず必要になるのが、『TOPへ戻るボタン』の作成。
今回はHTML、CSS、Javascript の３つを使った簡単な設置方法をご紹介します！
私のこちらのサイトで使っている、様々な機能をDEMOとして、これから複数の記事で紹介しようと思います。
（見るのはトップページのみで構いません）
参考サイト：http://kenpicopico.daa.jp/cafe_and/
コピペだけで大丈夫！簡単コーディング！
HTMLは1行
まずはHTMLについてですが、これはとってもシンプル！
<p id="page-top"><img src="image/top.png" alt="TOP" class="w100"></p>たったこれだけ！ボタンは100px＊100pxの画像を準備し、idをpage-topと設定して、適当にクラスを設定するだけ。
（w100はCSSでwidth: 100%;にしてます。）
CSSも1個
CSSもシンプル！
#page-top {
position: fixed;
bottom: 30px;
right: 10px;
width: 50px;
height: 50px;
}これはPCとSPでそれぞれ設定すると思いますが、簡単に言うと下と右端からどのくらい離してどのくらいの大きさにするか。
positionをfixedにするのがポイントですね！
そして一番大事なのがJavascript。
今回カスタマイズする機能は大きく３つです！
１、スクロールしたらボタンがヌルッと表示される
２、止める場所を決める
３、トップまで戻す
この３つを順々に紹介します。
（※jQueryをscriptタグで読み込んでおくのを忘れずに。）
１、スクロールしたらボタンがヌルッと表示される
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});トップ画面ではhide()で非表示にしていて、スクロールして高さが上から100vh超えたらボタンをフェードインして表示させ、トップに戻ってきたらフェードアウトで非表示にさせる感じです。
２、止める場所を決める
これがみんな苦労するところだと思います。普通に一番下までTOPへ戻るボタンを持ってきちゃうと、フッターメニューの何かしらのボタンの上に被ってしまう問題が発生したりしますよね。そんな時にはこれを使ってみてください！
//フッター手前でボタンを止める（ここを追加する）
$(window).scroll(function () {
var height = $(document).height(); //ドキュメントの高さ
var position = $(window).height() + $(window).scrollTop(); //ページトップから現在地までの高さ
var footer = $(".footerLogo").height(); //フッターの高さ
if ( height - position < footer ) {
topBtn.css({
position :"absolute",
top :40
});
} else {
topBtn.css({
position :"fixed",
top:"auto"
});
}
});ざっと説明すると、フッターの高さまで下にスクロールしてきたボタンが、フッターの高さに入った時から、フッターの上から40pxのところに固定するってことです。この40の数字を自身のサイトによって調整していただけたら大丈夫です。
ここで必ずして欲しいのが、フッターのCSSにposition: relative;を書いておくと言う事です！
.footer{
position: relative;
}こうしないとposition : “absolute”,が効かないので要注意です。
３、トップまで戻す
最後はスクロールしてトップに戻る動きを設定して終わりです。
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop:0
}, 500);
returnfalse;
});これはコピペで大丈夫です。戻るのにかかる時間は500のとこをいじって調整してください！
まとめ
長々となりましたが、これでトップに戻るボタンの紹介を終わります。
他にもいろいろなやり方あると思いますので、気になる方は他にもググって調べてみてください！
少しでもためになれば嬉しいです！
