jQuery ハンバーガーメニュー　いずれかのメニューをクリックしても閉じない

前提・実現したいこと

初心者です。
ハンバーガーメニューのなかのいずれかのメニューを押してページ内の押した場所に飛びたい。そしてメニューは非表示に。

.navigation_itemの　href=""だとメニューをクリックしたときに表示は消えてくれるが選択した場所へは移動してくれません。
href="#skills"などにするとメニューをクリックしても表示すら消えてくれません。

理想は選択したメニューの場所にきちんと飛んでくれて、かつメニューも非表示になってくれることです。
どうすればいいでしょうか。
よろしくお願いします。

発生している問題・エラーメッセージ

メニューの画面が表示されたまま

該当のソースコード

html
1<div class="hamburger" href="#" onclick="return false;">
2        <span></span>
3        <span></span>
4        <span></span>
5      </div>
6      
7      <div id="navigation">
8        <div class="navigation_inner">
9          <ul class="navigation_menu">
10            <li class="navigation_item"><a href="">SKILLS</a></li>
11            <li class="navigation_item"><a href="">WORKS</a></li>
12            <li class="navigation_item"><a href="">CONTACT</a></li>
13            
14          </ul>
15        </div>
16      </div>

js
1jQuery('.hamburger').on('click', function(){
2    jQuery(this).toggleClass("active");
3  jQuery('#navigation').fadeToggle(600);
4});
5

試したこと

SKILLS,WORKS,CONTACTのそれぞれ、
href=""　の部分をhref="#skills"などにしてみたができませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

実装内容は下記の通りになります。
ポイントとしては、
aタグのhrefの属性値にリンク先のid名を#をつけて入力します。
リンク先のブロックにはid名を付与することをお忘れなくご注意ください。

lang=html
1<ul>
2 <li><a href="#list01">リスト01</a></li>
3<ul>
4
5<section id="list01">
6 // do something
7</section>

ページ内のスムーススクロールは下記になります。
今回はメニューをクリックしたらページ内を移動してメニューを非表示なので下記の通りになります。

lang=javascript
1// ページ内スクロール use jquery
2const toScrollJquery = function () {
3　
4　// aタグに共通のクラス名を付与する
5  $('.fn-scroll').on('click', function () {
6
7　　// ページ内をスクロールするスピードをあらかじめ決めておく
8    const speed = 500;
9　　
10　　// 属性値を取得すると共に対象のオブジェクトも取得する
11    const href= $(this).attr('href');
12
13　　// 取得した属性値が、#あるいは''の時はhtml、違う場合はhref　※三項演算子
14    const target = $(href == '#' || href == '' ? 'html' : href);
15
16　　// 取得したオブジェクトの要素のトップからの位置を取得する
17    const position = target.offset().top;
18
19　　// 取得した位置まで移動する
20    $('html, body').animate(
21     {
22       scrollTop:position
23     },
24     {
25       duration: speed,
26       easing: 'swing',
27       complete: function() {
28          // 動作が完了した後の処理を記述 ここではスムーススクロールが終了した後となります
29          $('#navigation').fadeToggle(600);
30       }
31     });
32    return false;
33  });
34}
35
36window.addEventListener('load', toScrollJquery, false);