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

＼お米食べろ！／

どうも、今更ながらSteamのセールで天穂のサクナヒメを買って米を生産しているDJよろずやです。
田んぼの様子が気になって下手に探索に行けません。

Steam：天穂のサクナヒメ
稲を育てて強くなる和風アクションRPG登場！ 美麗グラフィックで描かれる『天穂のサクナヒメ』は 「ヒノエ島」を舞台に、島を支配する鬼と闘う爽快なコンボアクションと、 日本古来の米づくりを深く再現したシミュレーション要素が融合した ユニークな和風アクションRPGです。
store.steampowered.com

最近映画を見に行くことが度々あるのですが、先日見た「 映画大好きポンポさん 」が神作品すぎるので、是非とも皆さんにも見てほしいです。
絶対円盤買います。なんならもう1回映画館で見ようと思っています。

ストーリー、キャラデザ、音楽、演出。全てにおいて良作です。
多くは語らないので、まずは見てほしいですね。
※この記事が公開される頃には上映終わってるだろうけども。

劇場アニメ『映画大好きポンポさん』公式サイト
劇場アニメ『映画大好きポンポさん』2021年6月4日公開決定。pixivで65万ビューを超えた話題作が遂に劇場アニメ化！幸福は創造の敵——
pompo-the-cinephile.com

閑話休題

今回も、前回に引き続きJavascript(jQuery)シリーズとなります。
前回の記事はこちら。

月刊JAVASCRIPT - コーダーは「JS」がやめられない！ -
＼うまぴょい／どうも、先行ウマ娘を無限に育成しているDJよろずやです。最近はAPEXではなく、やっとこさリリースされたウマ娘をひたすらプレイしています。愛馬はマチカネフクキタル、ミホノブルボン、キングヘイローです。...
at.strix-inc.jp
2021.05.26

それではさっそく行ってみましょう。
はい、拍手👏。

  1. 月刊JAVASCRIPT Vol.2
    1. メニューリンク押下時にメニューを閉じる
    2. メニューリンク押下時にセクションへの自動スクロール
  2. おわりに

月刊JAVASCRIPT Vol.2

今回は
メニューリンク押下時にセクションへの自動スクロール&メニューを閉じる
に関してゆるーく説明していきます。

全体の動きはこうです。

メニューリンク押下時にメニューを閉じる 

$(function () {
  // class[headerNav_item]の子要素の[a]をクリックしたとき
  $('.headerNav_item > a').on('click',function () {
    // もしclass[l-header]がclass[l-header-active]を持っているなら
    if ($('.l-header').hasClass('l-header-active')) {
      // class[l-header]からclass[l-header-active]を削除する
      $('.l-header').removeClass('l-header-active');
      // 要素[body]からclass[body-menuOpen]を削除する
      $('body').removeClass('body-menuOpen');
    }
  });
});

いたってシンプルですね。

第1回の時は、ハンバーガーメニューの「三」をクリックしたときに、ヘッダーとbodyにclassを付与していましたが、今回は逆にメニューリンクをクリックしたら、class[l-header]と要素[body]からそれぞれclassを削除するだけです。

メニューリンク押下時にセクションへの自動スクロール 

$(function () {
  // 要素[a(リンク先が#(アンカーリンクの時))]をクリックしたとき
  $('a[href^="#"]').click(function () {
    // 変数speedに400ミリ秒を代入
    var speed = 400;
    // 変数hrefに$('a[href^="#"]')で取得した内容の属性の中身を取得して代入
    var href = $(this).attr('href');
    // 変数targetにhrefが#の時と空の時は('html')が、それ以外は変数(href)を代入
    var target = $(href == '#' || href == '' ? 'html' : href);
    // 変数positionに変数targetの左上の起点から、指定された要素までの距離の-64pxした距離を代入
    var position = target.offset().top - 64;
    //要素[body,html]は400ミリ秒のスピードで変数positionの位置まで、swingアニメーションでスクロールする
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    // 処理を中断。リンク先に飛ばされる可能性を防ぐために記述。
    return false;
  });
});

これまたいたってシンプル。
スクロール系は大体同じ事書くことが多いので、覚えていて損はないですね。

簡単に言うと、メニューリンクをクリックしたら、指定されたセクションまでスクロールしてねと書いてるだけです。

おわりに

今回はほんと簡単な内容になります。

いくつか下層ページがあるサイトなら、わざわざメニューを閉じなくてもいいのですが、最近はシングルレイアウトのサイトも増えているため、メニューリンクをクリックしたときは、メニューが閉じないと困るということがあります。
そんな時はぜひともこのコードを使ってみてくださいね。

それではまた👋

トップへ戻る
ホーム
トップ