jQueryでページトップへ戻るボタンに動きをつけよう

どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌
ここ最近新しいゲームにピンと来ず、PS3のアーカイブスからFF8をDLしてプレイしております。スコール尊いです( ˘ω˘)✌

どうでもいいですね✌(´ʘ‿ʘ｀)✌

今回はjQueryメソッドanimateとjQuery.Deferredを駆使して、動きのある「トップへ戻る」ボタンを作ってみました。
こちらの実装方法をご紹介します( ˘ω˘)☝

HTMLとCSSの準備

HTML

HTMLはこんな感じでございます。通常の状態の#buttonと、変化させた時に表示させる#button_linkを用意しました( ˘ω˘)☝

<footer id="footer">
    <a href="#wrapper" id="page_link">
        <span id="button"><i></i></span>
        <span id="button_change"></span>
    </a>
    <div class="inner">
        <small class="lig_copyright">© 2014 LIG INC.</small>
    </div>
</footer>

CSS

CSSはこんな感じでございます。#button_chengeはあらかじめopacityで見えなくしちゃいましょう。#wrapperのposition:rerativeをかけるのをお忘れなく( ˘ω˘)☝

#wrapper {
    position: relative;
}

#footer {
    background: #3498DB;
    color: #fff;
    padding: 74px 0 60px 0px;
    text-align: left;
}

#footer .inner {
    width: 960px;
    margin: auto;
    color: #fff;
}

#footer #page_link {
    width: 78px;
    height: 60px;
    position: absolute;
    left: 50%;
    margin-left: 500px;
    bottom: 115px;
}

#footer #button {
    background: #237DAC;
    z-index: 2;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
}

#footer #button i {
    width: 15px;
    display: block;
    height: 9px;
    left: 50%;
    top: 25px;
    margin-left: -7.5px;
    background: url(../images/arrow.png) no-repeat;
    position: absolute;
}

#footer #button_change {
    z-index: 1;
    position: absolute;
    bottom: 0px;
    opacity: 0;
    width: 78px;
    height: 60px;
    background: url(../images/back.png) no-repeat;
}

実装方法

お次に実装方法をご紹介します( ˘ω˘)☝

要素の変数の用意

まず要素の変数を用意します( ˘ω˘)☝

//変数▼
    var $pageLink = $('#page_link'),
        $pageButton = $('#button'),
        $backButton = $('#button_change');

イベントと要素の位置の変数

ページトップをクリックした後のために、スクロールの値の変数を用意しましょう( ˘ω˘)☝

/*---ページトップのcrickイベント---*/
    $pageLink.on('click', function (event) {

	//scrollの変数▼
        var self = $(this), //crickした要素
            id = $(this).attr("href"), //リンクの値を取得
            OFFSET = 80, //つけ足す値
            pageTop = self.offset().top, //ボタンのトップ位置
            target = $(id).offset().top - OFFSET; //到着点のトップの位置-付け足す位置

	self.css({top: pageTop}); //TOPのdefaultの値を設置

	event.preventDefault();
       　return false;
    });

アニメーションの実装

お次にjQuery.Deferredを使ってアニメーション関数を用意して、順序ごとに関数をつなげちゃいましょう( ˘ω˘)☝

/*---ページトップのcrickイベント---*/
    $pageLink.on('click', function (event) {

	//scrollの変数▼
        var self = $(this), //crickした要素
            id = $(this).attr("href"), //リンクの値を取得
            OFFSET = 80, //つけ足す値
            pageTop = self.offset().top, //ボタンのトップ位置
            target = $(id).offset().top - OFFSET; //到着点のトップの位置-付け足す位置

	self.css({top: pageTop}); //TOPのdefaultの値を設置

	//アニメーションの順番をまとめる
        function playAnimation() {
            fadeAnime()//動き１
                .then(upDown)//動き２
                .then(moveTop)//動き３
                .then(removeAction);//動き４
        }
 
        //アイコンが消えて顔が出てくるアニメーション動き１
        function fadeAnime() {
            var SPEED = 500;
            var d = new $.Deferred;
            $pageButton.animate({opacity: 0}, SPEED, function () {
                $backButton.animate({opacity: 1}, SPEED, function () {
                    d.resolve();
                });
            });
            return d.promise();
        }
 
        //上下にバウンドするアニメーション動き２
        function upDown(){
            var TIMER = 1000,
                TIMER2 = 700;
            var d = new $.Deferred;
            self.animate({
                top: pageTop - 140
            }, TIMER, function () {
                self.animate({
                    top: pageTop - 40
                }, TIMER2, function () {
                    d.resolve();
                });
            });
            return d.promise();
        }
 
        //ページトップに移動するアニメーション動き３
        function moveTop(){
            var TIMER = 1500;
            var d = new $.Deferred;
            $('html, body').animate({scrollTop: target}, TIMER, "easeInCubic");
            self.animate({top: target}, TIMER, "easeInCubic", function () {
                d.resolve();
            });
            return d.promise();
        }
 
        //アイコンを元の表示と位置に戻す動き４
        function removeAction() {
            var SPEED = 500;
            var d = new $.Deferred;
            self.hide(function () {
                self.fadeIn();
                self.css({top: pageTop});
                $pageButton.animate({opacity: 1}, SPEED);
                $backButton.animate({opacity: 0}, SPEED);
                d.resolve();
            });
            return d.promise();
        }
 
        //アニメーションの関数を実行
        playAnimation();

	event.preventDefault();
       　return false;
    });

ちょいとおまけ

アニメーションの処理とは別の対応ですが、ボタンの矢印がふわふわするアニメーションはこちらのプラグインを使用しました( ˘ω˘)☞三☞ｼｭｯｼｭｯ

参考：指定した要素をただただ上下に揺らすjQueryプラグイン
http://2inc.org/blog/2011/07/05/745/

ゆらゆらさせたいところに指定してあげれば簡単にゆらゆらしてくれます( ˘ω˘)☝

//ゆらゆらアニメーション
    $pageButton.find('i').yurayura({
        'move': 5,
        'duration' : 500
    });

これで完成になります( ˘ω˘)☝
できたものはこちらからご覧いただけます( ˘ω˘)☞三☞ｼｭｯｼｭｯ
DEMO

まとめ

いかがでしたでしょうか( ˘ω˘)
animateメソッドだけでも実装はできますが、functionを何重にもかけて書かないといけないのでソースが汚くなってしまいます(´∵｀)
これでainmateが見やすくなり、より細かい演出の記述も管理しやすくなりますね( ˘ω˘)
この管理の仕方は下の記事を参考にさせていただきました( ˘ω˘)☞三☞ｼｭｯｼｭｯ

参考：jQuery.Deferredでわかりやすく順番にアニメーションする方法
link

ガンガン使ってソースをきれいに管理できるよう心掛けたいですな。
ではでは( ˘ω˘)

【JSでアニメーションを使い熟（こな）す】

※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1）

※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その2）

※ ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう

※ SVGとjQueryで絵を描いているようなアニメーションを実装する方法

※ アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。