https://www.cuddle-jp.com/lp/js/header.js

1(function () {
2  document.addEventListener("DOMContentLoaded", () => {
3    const hamburgerBtn = document.querySelector(".js-hamburger-menu-btn");
4    const mobileMenu = document.querySelector(".js-header-menu");
5    const headerInner = document.querySelector(".js-header-inner");
6
7    if (!hamburgerBtn || !mobileMenu || !headerInner) {
8      return;
9    }
10
11    // topへのリンク取得
12    const topLinks = document.querySelectorAll(".js-top-link");
13
14    const closeMenu = () => {
15      // メニューが開いている場合のみ処理を実行
16      const isExpanded = hamburgerBtn.getAttribute("aria-expanded") === "true";
17
18      if (isExpanded) {
19        // 1. ボタンの状態とクラスを切り替え (通常アイコンに戻す)
20        hamburgerBtn.setAttribute("aria-expanded", "false");
21        hamburgerBtn.classList.remove("is-active");
22
23        // 2. メニューの状態とクラスを切り替え (スライドアウト)
24        mobileMenu.setAttribute("aria-hidden", "true");
25        mobileMenu.classList.remove("is-open");
26
27        // 3. ヘッダーの内側部分のクラスを切り替え (背景色を元に戻す)
28        headerInner.classList.remove("is-open");
29
30        // 4. スクロール固定を解除
31        document.body.classList.remove("no-scroll");
32      }
33    };
34
35    const toggleMenu = () => {
36      // 現在の状態をチェック
37      const isExpanded =
38        hamburgerBtn.getAttribute("aria-expanded") === "true" || false;
39
40      // isExpanded が false の場合は開く処理、true の場合は閉じる処理
41      if (!isExpanded) {
42        // 開く処理
43        hamburgerBtn.setAttribute("aria-expanded", "true");
44        hamburgerBtn.classList.add("is-active");
45        mobileMenu.setAttribute("aria-hidden", "false");
46        mobileMenu.classList.add("is-open");
47        headerInner.classList.add("is-open");
48        document.body.classList.add("no-scroll");
49      } else {
50        // 閉じる処理
51        closeMenu();
52      }
53    };
54
55    // ハンバーガーボタンのクリックイベント
56    hamburgerBtn.addEventListener("click", toggleMenu);
57
58    // ロゴリンクの処理
59    topLinks.forEach(topLink => {
60      topLink.addEventListener("click", e => {
61        // 1. メニューを閉じる
62        closeMenu();
63
64        // 2. スムーズスクロール処理を実行（以前のロジック）
65        const currentPath = window.location.pathname;
66
67        // トップページ（"/" または "/index.html"）にいる場合のみ発動
68        if (currentPath === "/" || currentPath === "/index.html") {
69          e.preventDefault();
70
71          window.scrollTo({
72            top: 0,
73            behavior: "smooth"
74          });
75        }
76        // トップページ以外にいる場合は、preventDefault() しないので
77        // そのまま href="/" に従ってトップページへ遷移します
78      });
79    });
80  });
81})();