ページ内リンクでハンバーガーメニューが閉じない

Question

前提・実現したいこと

ウェブサイト作成中で、教本を参考に作成しておりますが、
ハンバーガーメニューでページ内リンク（id 指定）に飛ぶとメニューが閉じません。
他の色々なサイトや、こちらでも検索しましたが、
JavaScript の記載がそれぞれ異なり、
JavaScript については、
恥ずかしながらわからないため、こちらにて質問いたしました。

補足：JavaScript はhtml 内の記載となります。

該当のソースコード

<header class="site-header">
	<nav class="headerNav">
		<ul>
			<li class="navItem navItemTop en">
				<a href="index.html">Top</a>
			</li>
			<li class="navItem navItemConcept en">
				<a href="#0_concept">Concept</a>
			</li>
			<li class="navItem navItemMenu en">
				<a href="#1_menu">Menu</a>
			</li>
			<li class="navItem navItemMenu2 en">
				<a href="#2_menu2">Menu2</a>
			</li>
			<li class="navItem navItemMenu3 en">
				<a href="#3_menu3">Menu3</a>
			</li>
			<li class="navItem navItemMenu4 en">
				<a href="#4_menu4">Menu4</a>
			</li>
			<li class="navItem navItemProfile en">
				<a href="#5_profile">Profile</a>
			</li>
		</ul>
	</nav>

	<div class="container">
		<button type="button" class="nav-button" onClick="navFunc()">
			<span class="sr-only">MENU</span>
		</button>
	</div>

/* ナビゲーションボタン */
.nav-button {
	box-sizing: content-box;
	padding: 0;
	outline: none;
	border: none;
	background: none;
	width: 30px;
	height: 20px;
	cursor: pointer;
	color: #735D48;
}

.nav-button::before,
.nav-button::after {
	content: '';
	display: block;
	height: 1px;
	background-color: currentColor;
	transform: translateY(10px);
	transition: 0.3s ease-in-out;
}

.nav-button::before {
	transform: translateY(-10px);
	box-shadow: 0 10px currentColor;
}

	/* ナビゲーションボタン（閉じるボタン） */
	.open .nav-button {
		z-index: 1000;
	}
	.open .nav-button::before {
		transform: rotate(-45deg);
		box-shadow: none;
	}
	.open .nav-button::after {
		transform: rotate(45deg);
		box-shadow: none;
	}
}


/* ナビゲーションメニュー：（開いた状態） */
html.open, .open body {
	height: 100%;
	overflow: hidden;
}

.open .site-header {
	position: relative;
	margin-bottom: -100px;
}

.open .headerNav {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(255,255,255,0.8);
	color: #735D48;
	display: flex;
	justify-content: center;
	align-items: center;
}

.open .headerNav ul {
	margin-bottom: 5px;
}

.open .headerNav li:not(:last-child) {
	margin-bottom: 5px;
}

/* ナビゲーションメニュー（閉じた状態） */
.headerNav {
	width: 0;
	height: 0;
	position: absolute;
	right: 100%;
	overflow: hidden;
	color: transparent;
	transition: 0.5s ease-in-out;
}


/* ナビゲーションメニュー */
	.navItem a {
		display: block;
		padding: 20px 0 15px;
		margin-left: 20px;
		text-align: center;
		font-size: 18px;
		color: #735D48;
		font-weight: bold;
	}
	
@media (max-height: 630px) {
	.navItem a {
		display: block;
		padding: 10px 0 5px;
		margin-left: 20px;
		text-align: center;
		font-size: 14px;
		color: #735D48;
		font-weight: bold;
	}
}

@media (min-width: 801px) {
	.navItem a {
		display: block;
		padding: 30px 0 30px;
		margin-left: 20px;
		text-align: center;
		font-size: 24px;
		color: #735D48;
		font-weight: bold;
	}
}


/* 擬似要素でテキストを表示 */
	.navItem a::after {
		display: block;
		margin-top: 2px;
		font-family: 'RocknRoll One', sans-serif;
		font-size: 10px;
		font-weight: lighter;
	}

	.navItemTop a::after {
		content: "トップ";
	}
	.navItemConcept a::after {
		content: "コンセプト";
	}
	.navItemMenu a::after {
		content: "メニュー";
	}
	.navItemDNAA a::after {
		content: "メニュー2";
	}
	.navItemREIKI a::after {
		content: "メニュー3";
	}
	.navItemMAXM a::after {
		content: "メニュー4";
	}
	.navItemProfile a::after {
		content: "プロフィール";
	}
}

@media (min-width: 801px) {
	.navItem a::after {
		display: block;
		margin-top: 2px;
		font-family: 'RocknRoll One', sans-serif;
		font-size: 20px;
		font-weight: lighter;
	}
}

<script>
function navFunc() {
	document.querySelector('html').classList.toggle('open');
}
</script>

Answer 1

手っ取り早いのは

function navFuncClose() {
    document.querySelector('html').classList.remove('open');
}

を用意しておいて、

<a href="#0_concept" onClick="navFuncClose()">Concept</a>

のようにすることですね。

Comments

[mammaluce]

早速のご回答、ありがとうございます！！　いただいた内容でJavaScript を追記し、それぞれのページ内リンクにも追記したところ、無事にメニューを閉じることができました！　本当にありがとうございます！！