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

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

はやち

はやち

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

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

今回はjQueryメソッドanimatejQuery.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で見えなくしちゃいましょう。#wrapperposition: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()//動き1
                .then(upDown)//動き2
                .then(moveTop)//動き3
                .then(removeAction);//動き4
        }
 
        //アイコンが消えて顔が出てくるアニメーション動き1
        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();
        }
 
        //上下にバウンドするアニメーション動き2
        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();
        }
 
        //ページトップに移動するアニメーション動き3
        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();
        }
 
        //アイコンを元の表示と位置に戻す動き4
        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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL