position: fixed;で固定したボタンでメニューを表示させると最上部に戻ってしまう

Question

前提・実現したいこと

メニューボタンを位置固定し、スクロールしたどの位置からでも、全画面メニューが右からスライドインするようなものを設置したいのですが、
メニューボタンをクリックするとページ全体が最上部に戻されてしまいます。（メニューは正常にスライドされます）

初歩的なことかもしれないのですが、
数時間格闘しましたがさっぱりわかりません…涙
どなたか分かる方がいたらどうか教えてくださいm(_ _)m

該当のソースコード

java script

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

HTML

<header class="header"> <nav class="nav"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="menu.html">MENU</a></li> <li><a href="about.html">ABOUT</a></li> </ul> </nav> <button type="button" class="nav-button" onClick="navFunc()"><span class="sr-only">MENU</span></button> </header>

CSS

/* ヘッダー /
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 72px;
z-index: 100;
display: flex;
justify-content: flex-end;
box-sizing: border-box;
padding-right: 14px;
}
/ ナビゲーションメニュー （開いた状態） /
@media (max-width: 767px) {
html.open, .open body {
height: 100%;
overflow: hidden;
}
.open nav {
left: 0;
}
/ 横スクロール発生させない /
html,body {
position: relative;
overflow-x: hidden;
}
}
/ ナビゲーションメニュー（収納中の表示） */
.nav {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100vh;
overflow: hidden;
color: #fff;
transition: left 0.5s;
background: var(--main-color);
}

試したこと

.navに「position:fixed」を入れたりしてみたが、変わらず…
ボタンを押すとメニューが出ると同時に最上部に飛ばされます（涙）

Answer 1

こんにちは。
これはどうですか？

html.open, .open body {
/* height: 100%; 削除 */
overflow: hidden;
}

Comments

[minotarou]

すばらしいです…！
該当箇所を削除したら、直りました。
本当に、ありがとうございました。