少し前からですが、画面を下にスクロールした時にトップへ戻るボタンが表示されるようなブログが増えてきました。私のブログでも例にもれずに簡単なアニメーションするボタンを自前で実装しました。今回のエントリーではその「アニメーションするトップへ戻るボタン」の作り方を紹介します。
↓このブログではこんな感じです。

画面を下にスクロールすると矢印のボタンが「にゅ~」っと表示されます。大まかに説明すると、アニメーション部分はjQuery、ボタンのレイアウト、配置はCSSでやっています。まずはボタンを実装したいページにjQueryの本体を読み込みます。
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
まぁjQueryのバージョンは何でもいいと思いますが、できれば最新の物を使いましょう。
それでHTMLのソースコードはこんな感じにします。
<div id="container">
<div id="header">
ここはヘッダー
</div>
<div id="main">
メインコンテンツ
</div>
<div id="footer">
ここはフッター
<p id="toTop"><img src="btn_toTop.png" /></p>
</div>
</div>
bodyタグ内のみを記述。
フッターの
<p id="toTop"><img src="btn_toTop.png" />
が表示させたいトップへ戻るボタンの画像です。
ページのCSSは以下のように。
* {
margin:0;
padding:0;
}
body {
background-color:#AFAFAF;
}
#header,
#main,
#footer {
width:900px;
margin:0 auto;
}
#header {
height:300px;
background-color:#FEFFDF;
}
#main {
height:800px;
background-color:#CCF7C4;
}
#footer {
height:300px;
background-color:#D3F9FE;
}
#footer p#toTop {
position:fixed;
bottom:0px;
left:50%;
margin-left:450px;
cursor:pointer;
}
CSSでのポイントはまずp#toTopをposition:fixed;とbottom:0px;でウィンドウの下部に固定してしまいます。
left:50%で画像の位置をウィンドウの中央に寄せ、さらにmargin-left:450px;でさらに右の方へ移動させます。450px;の部分はレイアウトに合わせて数値を変更させたらいいでしょう・・・
さて、jQueryのコードですが、以下のようにしました。
<script>
jQuery(function($) {
var topBtn = jQuery('#toTop');
topBtn.hide();
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 100) {
topBtn.slideDown();
} else {
topBtn.slideUp();
}
});
topBtn.click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
ポイントはどれくらいスクロールしたときにボタンを表示させるのか? という点と、ボタンをクリックしたときにどれくらいの速さでトップへスクロールさせるのかという点です。また、「topBtn.hide();」で初期状態ではボタンを非表示にしています。
この例では「scrollTop() > 100」の部分で100という数値を設定しています。この100という数値分下へスクロールした場合、ボタンがslideDown()によって表示されます。スクロール位置が100以下になった場合はslideUp();によりボタンを非表示にさせます。