月刊JAVASCRIPT – コーダーは「JS」がやめられない! Vol.3 –

\一狩り行こうぜ!/

どうも、久しぶりにThe Hunter: Call of the WildでマタギをやっているDJよろずやです。
動物の痕跡を探すだけで1時間以上はかかるゲームなので、忍耐との勝負です。

Steam:theHunter: Call of the Wild™
リアルかつ美しいオープンワールドで、他にはない趣ある狩りゲームを体験しましょう。ゲームはコミュニティと連携して定期的にアップデート。シングルプレイヤーキャンペーンにのめり込んでも、究極の狩り体験を友達と共有しても、お楽しみ頂けます。

閑話休題

今回も引き続きJavascript(jQuery)シリーズです。
今までの記事はこちらから。

月刊JAVASCRIPT Vol.3

今回は
ボタンを押下すると、画面最上部にスクロールする「Pagetopボタン」
に関して説明していきます。

動きはこう。

Pagetopボタン

$(function () {
  // 変数pagetopにid[js-pageTop]を代入
  var pagetop = $('#js-pageTop');
  // 変数pagetopを非表示にする
  pagetop.hide();
  // ウィンドウをスクロールしたとき
  $(window).on("scroll", function() {
    // もし、ウィンドウのスクロール値が100pxより大きい時
    if ($(this).scrollTop() > 100) {
      // pagetopをフェードインで表示する
      pagetop.fadeIn();
      // それ以外なら(ウィンドウのスクロール値が100px以内なら)
    } else {
      // pagetopをフェードアウトする
      pagetop.fadeOut();
    }
  });
  // pagetopをクリックしたとき
  pagetop.click(function () {
    // スクロール値0の位置まで、500ミリ秒のスピードでアニメーションをする
    $('body, html').animate({ scrollTop: 0 }, 500);
    // 処理を中断。リンク先に飛ばされる可能性を防ぐために記述。
    return false;
  });
});

めっちゃくちゃシンプルです。

結構使うことの多い、
$(window).on(“scroll”, function() {}
 →画面をスクロールしたら
$(xxx) .click(function () {}
 →xxxをクリックしたら
は絶対に覚えておいたほうが良いことなので、何回でも反復して書いてみましょう。

おわりに

次回でついに最終回!
ラストの内容は画像のPC/SP切り替えです。
乞うご期待!!

私も新しい記事ネタ探す旅に出ますぞ~~~~~

それではまた👋

トップへ戻る