【iSara模写コーディング】プログラミング歴1ヶ月の初心者が挑戦してみた!⑫

今回でiSaraの模写コーディングは終了です!
残すはフッタートップページに戻るボタンになりますね。

お手本

この画面がフッターになりますね。ページをスクロールして最後の画面になります。

お手本

そして、右下にあるアイコンがトップページに戻るボタンです。

また、忘れていたのですが資料請求をクリックすることによって、お問い合わせフォームに遷移するようにしなければなりませんでしたね…。

この画面の右上のアイコンです!

一応、模写コーディングの様子を最初から見たい方がいるとしたらこちらからどうぞ。

目次

この画面のつまずきポイント

① トップページに戻るボタンにjqueryが登場!

トップページのボタンなんて簡単に作れるだろうと思っていましたが、まさかのjqueryさんの登場です…。

ぶーた

jqueryがでてくるとは聞いてないのだ!

なぜ、jqueryが必要なのかというとトップページへの戻り方がスクロールしながら戻るからです。

↓こんな感じのボタンです(safariだと起動しないです…。)

ボタン

② 戻るボタンが消える

実はトップに戻ると右下のボタンが消えます。
これはjqueryのfadeOutメソッドを使うことで実現できます!

ぶーた

ま…またjquery…

③ お問い合わせフォームに戻る処理が複雑

お問い合わせフォームのこの画面に戻るためには、トップに戻るボタンと同様にスクロールするのですが、こちらの方が少し複雑になっているのです…。

実際に挑戦してみよう!

フッター

ぶーた作

フッターは簡単なので説明はなしです!

 <footer id="footer">
        <p>バンコクのノマドエンジニア育成講座、iSara[イサラ]<br>Copyright © <span>iSara</span> All Rights Reserved.</p>
        <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=150&layout=button&action=like&size=small&share=true&height=65&appId" width="150" height="65" style="border:none;overflow:hidden"
          scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        <p>Designed by <span>Maya Ogi </span>/ Developed by <span>Kentaro Koga</span></p>
</footer>
#footer {
    background-color: rgb(239, 239, 239);
}

#footer p {
    color: rgb(40, 40, 40);
    font-size: 0.8rem;
}

#footer p:first-child {
    padding: 4vh 0 1vh 0;
}

#footer p:last-child {
    padding-bottom: 3vh;
}

#footer p span {
    color: rgb(133, 209, 250)
}

トップに戻るボタン

まずはhtmlとcssを完成させましょう!

position: absolute; で位置を決めて position: fixed; で固定させましたね。

<a class="top-btn" href="#">
    <div class="top-icon"></div>
</a>
.top-btn {
    position: absolute;
    bottom: 5vh;
    right: 2vh;
    background-color: rgb(239, 239, 239);
    height: 55px;
    width: 55px;
    position: fixed;
}

.top-icon {
    height: 10px;
    width: 10px;
    border-top: 2px black solid;
    border-left: 2px black solid;
    transform: rotate(45deg);
    margin-top: 45%;
}

ここまできたらいよいよjqueryです!

まずはトップの位置にきたら、消える処理を記述していきましょう。
使用するメソッドは以下になります。

scroll … スクロール時に実行、clickと同じ使い方
scrollTop … 現在の位置を取得(y座標)
fadeIn(fadeOut) … 戻るボタンを表示(非表示)

 $(window).on('scroll', function() {  //スクロールされたら処理を実行
        const setHeight = 300;     //消える位置を決める(今回は300px)
        const nowHeight = $(window).scrollTop(); //現在の位置を取得

        if (nowHeight > setHeight) {  //現在の位置が消える位置より大きいときに実行
            $('.top-btn').fadeIn();  //戻るボタンを表示
        } else {
            $('.top-btn').fadeOut();  //戻るボタンを非表示
        }
    });

if文を利用して、なんとか処理を実行することができました。

次はスクロールして上に戻る処理が必要になります。
animateメソッドを利用することで簡単に記述することができます。

$('.top-btn').click(function() {
     $('html,body').animate({ scrollTop: 0 }, 500);
});

top-btnクラスがクリックされたら処理が実行されるようになっています。

animateメソッドの中のscrollTop: 0 は0の地点(トップ)まで戻るという処理になっており、500は0.5秒を表しています。

これでトップに戻るボタンは完成です!!

ぶーた

ふぅ…大変だったのだ…

お問い合わせフォームに戻る処理

お問い合わせフォームに戻る処理を忘れていたので、記述していきます。

トップに戻るボタンと同じようにjquwryを記述すればいいのですが、
animation({ scrollTop: 0 }, 500)
の部分をお問い合わせフォームの高さにしなければいけません。

そんな時に使えるメソッドがoffsetです!

offset … html要素の表示位置を取得できる

const setPosition = $('#main-19').offset().top;

  $('.scroll').click(function() {
      $('html,body').animate({ scrollTop: setPosition }, 500);
});

main-19をクラスで指定してた部分をidに変更させました。
クラス指定だと要素は取得できません…。

以上でiSaraの模写コーディングは終了です!
しっかり作り込んだのでしばらくはポートフォリオの作品として掲載しておこうかな…。

広告

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる