JavaScriptで変数が存在しないときでも機能させるためにはどうすればいいか

前提・実現したいこと

１．今回提示したスムーススクロールをhtml中にid=menuがない場合でも動くようにしたいが、どうすればいいか
２．変数がhtml中に存在しなくても機能させることは可能か

提示したjsにはdocument.getElementById("menu").clientHeightが含まれており、html中に <div id="menu"></div>がないと正常に機能しません。

変数がhtml中に存在しないとjsが正常に動かないことは体感しているのでいるのですが、実は今まではjQueryによるスムーススクロールを実装しており、そちらでは<div id="menu"></div>がないページでも機能していたので、何か方法があるのではないかと考えた次第です。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title></title>
5    <link rel="stylesheet" href="style.css" type="text/css" />
6  </head>
7  <body>
8    <div id="menu"><!-- ここを消すと動かない -->
9    </div>
10
11    <div class="topic" id="x01">
12      <h2>01</h2>
13      <a href="#x02">02</a><!-- #menuを消すと動かない -->
14    </div>
15
16    <div class="topic" id="x02">
17      <h2><strong>02</strong></h2>
18      <a href="#">top</a><!-- #menuを消しても動く -->
19      <a href="#x01">01</a><!-- #menuを消すと動かない -->
20    </div>
21
22    <script src="script.js"></script>
23</body>
24</html>

js
1document.addEventListener('click',e=>{
2  if([...document.querySelectorAll('[href^="#"]')].includes(e.target.closest('a'))){
3    const href=e.target.closest('a').getAttribute("href");
4    let navHeight = document.getElementById("menu").offsetHeight;
5    console.log(navHeight);
6    const top=(href=="#" || document.querySelector(href)==null)?0:(window.scrollY+document.querySelector(href).getBoundingClientRect().top-navHeight);  
7    e.preventDefault();
8    window.scroll({
9      top,
10      behavior: "smooth",
11    });
12  }
13});

css
1#menu {
2  display: block;
3  margin: 0;
4  position:fixed;
5  top: 0;
6  width: 100%;
7  background: red;
8}
9
10div {
11  margin-top: 150px;
12}
13
14.topic{height:999px}

試したこと

エラー文が何も出ていないのでとりあえず以下を記述してみましたが、何も変わりませんでした。
if (typeof navHeight !== 'undefined') {
let navHeight = 0;
}

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

回答1件

ベストアンサー

前回からいまいち仕様を理解していないのですが

javascript
1  let navHeight = document.getElementById("menu")?.offsetHeight||0;

投稿2021/03/06 05:55

yambejp

総合スコア116661

aaaaMAX

2021/03/06 06:03

動くようになりました！前回から私も考えていたのですが、実はメニューのないページにはコンテンツ内にページ内リンクがあることがありまして、恐らくそこが伝わらなかったのかと思います。 ()?～||数字と書くことで変数がなかった場合に対応できるんですね。1から10までお世話になりました。ありがとうございました。

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