SvelteのonClickが走らない

Question

実現したいこと

svelteでナビゲーション入りのモーダルメニューを作成しています。
リンク先により、ページ内遷移となる場合があるのですが
その際にモーダルメニューをOFFに切り替えたいです。

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

aタグや、親のliタグににonClickを設定して試してみましたが
ページ内遷移されるのみで、onClickは走っていないようでした。

該当のソースコード

<script>
  export let menu;
  
  let show = false;
  const handleClick = () => {
    document.body.style.overflow = show ? '' : 'hidden';
    show = !show;
  };
  const handleClickAnchor = () => {
    console.log('click');
    document.body.style.overflow = '';
    document.startViewTransition(() => { show = false });
  };
</script>

<button transition:fade onclick={() => handleClick()}>toggle</button>
<nav transition:fade>
  <ul>
    {#each menu as item}
      <li>
        <a href={item.url} onClick={() => handleClickAnchor()}>{item.name}</a>
      </li>
    {/each}
  </ul>
</nav>

const menu = [
    {
      name: "Home",
      url: "/",
    },
    {
      name: "News",
      url: "/#news",   //  同ページでクリックした場合もモーダルをオフにしたい
    },
    {
      name: "Contact",
      url: "/contact",
      external: false,
    },
]

試したこと・調べたこと

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

上記の詳細・結果

onClickを設定する要素を変えてみたり、startViewTransitionありなしで試したりしましたが
そもそもconsole.logが表示されないので、
根本的に記述方法が間違っているかもしれないのですが、調べきれずご相談した次第です。
恐れ入りますがご教示いただけるとありがたいです。

補足

"svelte": "^5.30.1"

Comments

[maisumakun]

> ページ内遷移されるのみで、onClickは走っていないようでした。

ページ「内」遷移（別なページに移るのではない）、というのは間違いないですか？

[nqf6nbs]

コメントありがとうございます！
情報の不足大変申し訳ありません。

このsvelte製モーダルは、astroのページでLayout経由で読み込んでいます。
現在地が index.astro（トップページ）の状態でモーダルを開き、
リンク先が「href="/#news"」のaタグをクリックすると
スムーススクロールで該当箇所へ移動するがモーダルは表示されたまま、というのが現状です。
（モーダルが透けてるのでスムーススクロールで移動してるのが見える）

こういった状況で「ページ内遷移」と表現してしまいましたが誤りでしたら申し訳ありません。
ちなみにClientRouterのビュートランジションは読み込んでいません。