ドロワーメニューのページ内リンクをクリックした際、スムーススクロールの挙動が不安定になる

Question

実現したいこと

モバイルサイズの時、ハンバーガーボタンをクリックすることでドロワーメニューの開閉をしています。
ドロワーメニューが開いている際はサイト全体が現在のスクロール位置で固定され、閉じた時に解除されるようにしています。
またスムーススクロールを実装し、ページ内リンクをクリックした際に該当箇所にスクロールするようにしています。
モバイルサイズ時には、ページ内リンクをクリックした際、ドロワーメニューが閉じ、サイトの固定が解除され、目的の位置までスクロールするようにしたいです。

発生している問題・分からないこと

基本的には動いているのですが、モバイルサイズ時にページ内リンクをクリックした際のスムーススクロールの挙動が怪しいです。
全くスクロールをしていない状態では正常に動くのですが、中途半端にスクロールした状態や該当箇所より下にスクロールした状態だと、スムーススクロールで移動する位置がTOPになったり、画面の中央あたりに移動先が来ていたりと、挙動がおかしくなります。

エラーメッセージ

エラーメッセージは出ていません。

該当のソースコード

<header>
		ヘッダー
		<nav>
			<ul class="nav_glb">
				<li><a href="index.html"><span>ホーム</span></a></li>
				<li><a href="#products"><span>事業内容</span></a></li>
				<li><a href="index.html"><span>会社概要</span></a></li>
				<li><a href="index.html"><span>拠点情報</span></a></li>
				<li><a href="index.html"><span>採用情報</span></a></li>
				<li><a href="index.html"><span>よくある質問</span></a></li>
			</ul>
		</nav>
		<button class="trigger"><span></span></button>
		<div class="cover_layer"></div>
	</header>

	<div class="kv">

	</div>
	<main class="inner">

		<h2 id="products">事業内容</h2>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</main>

body {
	width: 100%;
}
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 2.75rem;
	background: rgba(0,0,0,.6);
	transition: .3s;
	z-index: 100;
}
header.change {
	background: rgba(0,0,0,0);
	border-bottom: 1px solid #000;
}

@media (width < 768px ) {/*sp only*/
	.trigger {
		position: fixed;
		top: 0;
		right: 0;
		width: 2.75rem;
		height: 2.75rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1300;
	}
	nav {
		position: fixed;
		width: 250px;
		height: 100vh;
		top: 0;
		right: -250px;
		z-index: 1200;
		background: #fff;
		transition: .3s;
	}
	nav.open {
		right: 0;
	}
	nav .nav_glb {
		margin-top: 2.75rem;
		border-top: solid 1px #ccc;
	}
	nav .nav_glb li {
		border-bottom: solid 1px #ccc;
	}
	nav .nav_glb li a {
		display: block;
		padding: 1rem;
	}
	nav .nav_glb li a:hover,
	nav .nav_glb li a:active {
		background: rgba(90, 79, 57, 0.2);
	}
	.cover_layer {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 1100;
		background: rgba(0,0,0,0);
		transition: .3s;
		pointer-events: none;
	}
	.cover_layer.open {
		background: rgba(0,0,0, .7);
		pointer-events: auto;
	}
}
@media (768px <= width) {/*pc only*/
	.trigger,.cover_layer {
		display: none;
	}
	nav {
		min-height: 2.75rem;
	}
	nav .nav_glb {
		display: flex;
		height: 2.75rem;
	}
	nav .nav_glb li {
		flex: 1 1 0;
		position: relative;
	}
	nav .nav_glb li a {
		width: 100%;
		height: 2.75rem;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		position: relative;
	}
	nav .nav_glb li a:hover {
		background: #666;
	}
}
.kv {
	width: 100%;
	height: 100vh;
	background: #ccc;
}

//スライドメニュー
$(function () {
	let state = false; // メニューの開閉状態を管理するフラグ
	let scrollpos; // スクロール位置を保持する変数
	const change = $('.trigger, nav, .cover_layer'); // メニューのトグル要素

	// メニューのトグル要素がクリックされた時の処理
	$('.trigger, .cover_layer').on('click', function () {
		change.toggleClass('open'); // メニューの表示/非表示を切り替える
		if (state === false) { // メニューが開かれた場合
			scrollpos = $(window).scrollTop(); // 現在のスクロール位置を取得
			$('body').css({
				position: 'fixed',
				top: -scrollpos
			}); // スクロール位置を固定し、ページの位置を保持
			state = true; // フラグをtrueに設定
		} else { // メニューが閉じられた場合
			$('body').attr('style', ''); // スクロール位置の固定を解除
			window.scrollTo(0, scrollpos); // 元のスクロール位置に戻す
			state = false; // フラグをfalseに設定
		}
	});

	// ウィンドウの読み込みやリサイズ時に実行する処理
	$(window).on('load resize', function () {
		let winW = $(window).width(); // ウィンドウの幅を取得
		let devW = 768; // スマートフォンサイズの幅
		if (winW >= devW) { // ウィンドウ幅がスマートフォンサイズより大きい場合
			if (change.hasClass('open')) {
				change.removeClass('open');
				$('body').attr('style', '');
				window.scrollTo(0, scrollpos);
				state = false;
			}
		}
	});

	// ページ内リンクがクリックされた時の処理
	$('a[href^="#"]').on('click', function () {
		const adjust = $('header').outerHeight(); // ヘッダーの高さを取得
		const speed = 400; // スクロール速度
		const href = $(this).attr("href"); // クリックされたリンクのhref属性を取得
		const target = $(href == "#" || href == "" ? 'html' : href); // スクロール先の要素を取得
		const position = target.offset().top - adjust; // スクロール位置を計算
		change.removeClass('open'); // メニューを閉じる
		$('body').attr('style', ''); // スクロール位置の固定を解除
		state = false; // フラグをfalseに設定
		$('body,html').animate({scrollTop: position}, speed, 'swing'); // スムーススクロールを実行
		return false; // リンクのデフォルト動作を無効化
	});
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

どうも現在地を変数に保存して、メニューを閉じた時に現在地まで移動する部分とバッティングしているせいっぽいと思うのですが、解決策がわかりませんでした。
現在地を固定→アコーディオンを開いてナビゲーション内でスクロール→ページ内リンクをクリックの辺りが悪影響を及ぼしている気がします。

補足

特になし

Answer 1

順序を入れ替えてみてはどうですか？

const position = target.offset().top - adjust; // スクロール位置を計算
change.removeClass('open'); // メニューを閉じる
$('body').attr('style', ''); // スクロール位置の固定を解除

↓

$('body').attr('style', ''); // スクロール位置の固定を解除
const position = target.offset().top - adjust; // スクロール位置を計算
change.removeClass('open'); // メニューを閉じる

Comments

[cofcof]

回答ありがとうございます。
試したところ問題が解決しました！
完全に見落としておりました。
ベストアンサーに選ばせていただきました。