【jQuery】グローバルナビのリンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせたい

実現したいこと

グローバルナビ（ハンバーガーメニュー）内の、href属性に"#"を持つaタグをクリックすると、グロナビを開じて、クリックした属性と同じid名を持つ要素のトップにページ内スクロールさせたい

問題

グロナビのaタグをクリックしても、対象の要素まで自動スクロールしません。
button_containerクラスが付いたボタンをトリガーとして、グロナビを開く・閉じる、またaタグをクリックしてグロナビを閉じる、の動作は実現できており、対象の要素まで自動スクロールする動作のみ実現できていません。
エラーメッセージは何も表示されていません。

該当のソースコード

HTML
1<header class="header">
2      <div class="button_container" id="toggle">
3        <span class="first"></span>
4        <span class="second"></span>
5      </div>
6      <div class="overlay" id="overlay">
7        <nav class="overlay-menu">
8          <ul>
9            <li class="menu_item"><a href="#profile">PROFILE</a></li>
10            <li class="menu_item"><a href="#contact">CONTACT</a></li>
11            <li class="menu_item"><a href="#privacy_policy">PRIVACY POLICY</a></li>
12          </ul>
13        </nav>
14      </div>
15    </header>
16    <main>
17      <div class="content_wrap">
18        <div class="front_content" id="#profile"></div>
19        <div class="front_content" id="#contact"></div>
20        <div class="front_content" id="#privacy_policy"></div>
21      </div>
22    </main>

SCSS
1.button_container {
2  position: fixed;
3  right: 0;
4  height: $button-height;
5  width: $button-width;
6  cursor: pointer;
7  z-index: 100;
8  transition: opacity 0.25s ease;
9  margin: 24px 16px;
10
11  &:hover {
12    opacity: 0.7;
13  }
14
15  &.active {
16    .first {
17      transform: translateY(4px) translateX(0) rotate(45deg);
18      background: $color-active;
19    }
20
21    .second {
22      transform: translateY(-4px) translateX(0) rotate(-45deg);
23      background: $color-active;
24    }
25  }
26
27  span {
28    position: absolute;
29    top: 0;
30    left: 0;
31    background: $color-main;
32    border: none;
33    height: 1px;
34    width: 100%;
35    transition: all 0.35s ease;
36    cursor: pointer;
37
38    &:nth-of-type(2) {
39      top: 8px;
40    }
41  }
42}
43
44.overlay {
45  position: fixed;
46  background: $color-background;
47  top: 0;
48  left: 0;
49  width: 100%;
50  height: 0%;
51  opacity: 0;
52  visibility: hidden;
53  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
54  overflow: hidden;
55
56  &.open {
57    opacity: 0.9;
58    visibility: visible;
59    height: 100%;
60
61    li {
62      animation: fadeInRight 0.5s ease forwards;
63      animation-delay: 0.35s;
64
65      &:nth-of-type(2) {
66        animation-delay: 0.4s;
67      }
68      &:nth-of-type(3) {
69        animation-delay: 0.45s;
70      }
71      &:nth-of-type(4) {
72        animation-delay: 0.5s;
73      }
74    }
75  }
76
77  nav {
78    position: relative;
79    height: 70%;
80    top: 50%;
81    transform: translateY(-50%);
82    font-size: $font-size-head;
83    font-family: $font-family;
84    font-weight: 400;
85    text-align: center;
86  }
87
88  .instagram_icon {
89    width: 16px;
90    height: 16px;
91  }
92
93  ul {
94    list-style: none;
95    padding: 0;
96    margin: 0 auto;
97    display: inline-block;
98    position: relative;
99    height: 100%;
100
101    li {
102      display: block;
103      height: calc(100% / 8);
104      min-height: 32px;
105      position: relative;
106      opacity: 0;
107
108      a {
109        display: block;
110        position: relative;
111        height: 32px;
112        color: $color-link;
113        text-decoration: none;
114        overflow: hidden;
115
116        &:hover:after,
117        &:focus:after,
118        &:active:after {
119          width: 40%;
120        }
121
122        &:after {
123          content: '';
124          position: absolute;
125          bottom: 8px;
126          left: 50%;
127          width: 0%;
128          transform: translateX(-50%);
129          height: 1px;
130          background: $color-link;
131          transition: 0.35s;
132        }
133      }
134    }
135  }
136}

js
1function toggleButton() {
2  $('#toggle').click(function () {
3    $(this).toggleClass('active');
4    $('#overlay').toggleClass('open');
5  });
6
7  // スクロール
8function toggleButton() {
9  $('#toggle').click(function () {
10    $(this).toggleClass('active');
11    $('#overlay').toggleClass('open');
12  });
13
14  // スクロール
15  $('#overlay a[href^="#"]').click(function () {
16    var speed = 400;
17    var href = $(this).attr('href');
18    var target = $(href == '#' || href == '' ? 'html' : href);
19    var windowWidth = $(window).width();
20    var windowSm = 1279;
21    if (windowWidth <= windowSm) {
22      var headerHight = 556;
23    } else {
24      var headerHight = 1000;
25    }
26    if (target.length) {
27      var position = target.offset().top - headerHight;
28    }
29    $('body,html').animate({ scrollTop: position }, speed, 'swing');
30    return false;
31  });
32
33  // グローバルナビメニューのリンクをクリックしたらページを閉じる
34  $(function () {
35    $('#overlay .overlay-menu ul li a').on('click', function () {
36      $('#overlay .overlay-menu ul').toggleClass();
37      $('#toggle').removeClass('active');
38      $('#overlay').removeClass('open');
39    });
40  });
41}
42
43function init() {
44  toggleButton();
45}
46
47init();

試したこと

id名が正しいかどうか確認→問題なし
トップの高さを定義する記述をjsに追加した→変化なし

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

以下記述が、トップの高さを定義するために追加した記述ですが、ページ内遷移させたい対象の要素の親要素がページトップから以下のように高さを設けているため、記述しています。

js
1    var windowWidth = $(window).width();
2    var windowSm = 1279;
3    if (windowWidth <= windowSm) {
4      var headerHight = 556;
5    } else {
6      var headerHight = 1000;
7    }