ど素人が手探りでjQueryでWebサイトによくある機能を作った奮闘記です。
温かい目で見守ってくださると嬉しいです。

作るときの縛り

未知の技術を学ぶ練習も兼ねて、使えるメソッドを自分で判断し、組み立てる事ができるようになることを目標として、今回は縛りを設けて作成しています。

・jQueryの公式リファレンスのみ
・検索をかけるときは、「メソッド名　jQuery」という検索ワードのみ使用可
　「tab　作り方　jQuery」という書き方は、コードそのものが出てきてしまうのでNG
・命名規則は「FLOCSS＋BEM」を改変して使用。

ページTOPアイコンの動き

最初は、このようなページTOPアイコンのアニメーションを作成していきます。

・ページをスクロールすると下からリスが半分出てくる。
・マウスカーソルをhoverすると全身が出る
・クリックするとページのTOPへ
・TOPに戻るとリスが消える

このような仕様となっています。

使用するコード

HTML

使用するHTMLは以下です。

<div class="container">
    <div class="c-pageTop">
        <a href="#" class="c-pageTop__link">
            <img src="img/jquery001/squirre.png" alt="PageTOP" class="c-pageTop__img">
        </a>
    </div>
</div>

CSS

ページをスクロールできるように、高さのみ設定を設定。
他、アイコンの最初の位置など基本的なスタイルを設定しています。

.container{
    height: 3000px;
}

.c-pageTop {
    position: fixed;
    bottom: -130px;
    right: 5px;
    transition: all 600ms ease;
}

.c-pageTop .c-pageTop__img {
    cursor: pointer;
}

.c-pageTop .c-pageTop__link:hover {
    opacity: 1;
}

作ってみよー！

使えるメソッドの検討をつける

作り方が皆目検討がつかなかったので、まずはリファレンスをひたすら読み、使えそうなメソッドを探して見ました。

初見で使えそうだなーと思ったのは
・scroll()
・click()
でした。

hoverすると下からニョキっと出てくる動きを再現できるメソッドは見つけられませんでした。fadeIn()もshow()も違うっぽい。

探しているとanimate()という、スタイルを要素にあててくれるメソッドがあることに気づきました。もしやこれで、要素の位置をしていするプロパティをあてていくと動くのでは！？

失敗

早速、scroll()、click()、animate()を使って作成してみました。

スクロールすると上に上がり続け、終いにはページから消えるページTOPアイコンの完成です。
何を思ったか、animate()で指定するプロパティをposition: absolute; bottom: +50px;と書いてしまったのが原因です。ひたすら、下に50px追加されていきます。
爆笑でした。

CSSで変化後の位置を指定、jQueryでクラスを付け替える

どうやら、メソッドで動かすよりも、CSSで変化後の位置をかき、jQueryでクラスを付け替えて動かす方法があると気づきました。

使用するメソッドは
・addClass()
・removeClass()
を使っていきます。

CSS

新たに変化後の位置を指定するCSSを追加しました。

.harf{
    bottom: -50px; 
    transition: all 600ms ease;
}

.harf:hover{
    bottom: 5px;
}

JS

ページのスクロール位置で条件分岐し、クラスを付け替えるようにしました。

$(function() {
    var harfOfPage = $(window).innerHeight() / 2;
    $(window).scroll(function() {
        if($(window).scrollTop() > harfOfPage){
            $(".c-pageTop").addClass('harf');
        }else{
            $(".c-pageTop").removeClass("harf");
        }
    });
});

完成

この方法でこの動きが再現できました！

途中、失敗もありましたが無事動くページTOPアイコンを作成することが出来ました！
クラスを付け替えてアニメーションを作成するのは基本の基本とのこと。
今後も使って行けそうです。

改善点の多いコードですが、まずは泥臭く動くものを作成してみました。
ありがとうございました！