ｊQueryを使って"ページの先頭に戻る"ボタンを作る

最近よくあるアニメーションに、下のほうまで行くと"TOP"みたいなボタンがあって、それを押すとページの先頭まで自動でスクロールする、というものがありますよね。

あれをjQueryを使って実装する場合、animateメソッドを使います。おおざっぱな実装ではこんな感じです。

$('#back_to_top').hide();
$(window).scroll(function(){
    if($(this).scrollTop() > 1000){
        $('#back_to_top').fadeIn();
    }else{
        $('#back_to_top').fadeOut();
    }
});
$('#back_to_top a').click(function(){
    $('body').animate({
        scrollTop: 0
    }, 400);
    return false;
});

ボタンのIDはback_to_topです。まずはscrollTopで現在のy軸座標を取得します。それに合わせて適当にshowやhideでボタンを表示します。

今回の前提としては、ボタンのpositionをfixedで指定しておき、画面読み込み時にはhideメソッドで隠しておく感じですね。そして適当にピクセル分スクロールダウンしたら、fadeInでふわっと表示させます。もちろん単純にshowでも構いません。

さて、UIに関することはこれくらいにして、とにかくポイントはanimateメソッドを使うことです。これは四角形なんかを変形させるときにも使えます。

scrollTopではなく、heightやwidthに値を指定しておくだけですね。

あとは第二引数で変化時間を設定しておけば、オリジナルのアニメーションを実装できるという具合です。もう少し複雑な引数もあるのですが、基本はこれだけです。

animateメソッドは簡単なアニメーションを手早く実装できるので、ぜひ使いこなしたい機能です。