アンカーリンクでアコーディオンメニューを開かせる際の挙動

Question

前提・実現したいこと

jQueryを使用し、アコーディオンメニューを実装しています。

ページ内リンク・ページ外リンクからアコーディオンメニューを開いたときに、スムーススクロールをしながらアコーディオンメニューのTOPへ移動させたいです。

発生している問題・エラーメッセージ

現在、以下のようなコードで実装していますが、ページ内リンクで開いたとき、アンカーリンクが上手く作動しなく、ページ全体の上部へスクロールしてしまいます。

  <dl class="js-accordion">
    <div class="container">
      <dt>アコーディオンメニュー01</dt>
      <dd id="link01">アコーディオンメニュー01の内容。<a href="#link02">メニュー02を開く</a></dd>
    </div>
    <div class="container">
      <dt>アコーディオンメニュー02</dt>
      <dd id="link02">アコーディオンメニュー02の内容。<a href="#link03">メニュー03を開く</a></dd>
    </div>
    <div class="container">
      <dt>アコーディオンメニュー03</dt>
      <dd id="link03">アコーディオンメニュー03の内容。<a href="#link04">メニュー04を開く</a></dd>
    </div>
    <div class="container">
      <dt>アコーディオンメニュー04</dt>
      <dd id="link04">アコーディオンメニュー04の内容。<a href="#link05">メニュー05を開く</a></dd>
    </div>
    <div class="container">
      <dt>アコーディオンメニュー05</dt>
      <dd id="link05">アコーディオンメニュー05の内容。<a href="#link01">メニュー01を開く</a></dd>
    </div>
  </dl>

  <style>
    .container {
      margin-bottom: 300px;
    }

    .js-accordion dd {
      display: none;
    }

    .js-accordion dd:target {
      display: block;
      height: auto;
    }
  </style>

    $(function () {
      $('.js-accordion dt').on('click', function () {
        $(this).next().slideToggle();
      });
    });

    var headerHeight = 80;
    var urlHash = location.hash;
    $('a[href^="#"]').click(function () {
      var href = $(this).attr("href");
      var target = $(href);
      var position = target.offset().top - 30;
      $('body,html').stop().animate({ scrollTop: position }, 500);
    });

試したこと

スムーススクロールのjQueryを外すと、きちんとアンカーリンクの場所へ移動してくれます。

http://www.ofuta.me/jquery/585
上記の記事を確認し、どうやらtarget.offset().top;が問題であることは分かったのですが、解決策を試してもうまく動作しませんでした。

補足事項

別ページからのアンカーリンクの取得は上手くいき、下記の記述を追加することで別ぺージからのスムーススクロールも可能したが、同一ページでのアンカーリンクだけが上手く動作しませんでした。

  if (urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function () {
      var target = $(urlHash);
      var position = target.offset().top - headerHeight;
      $('body,html').stop().animate({ scrollTop: position }, 500);
    }, 100);
  }

ご教示いただけますと幸いです。よろしくお願いいたします。

Answer 1

上記、解決しました。idを付与する場所が異なっていました。
display:noneで非表示にしているタグにidをつけていたため、アンカーリンクで反応しなくなっていたようです。
親の要素の.containerに付与し、cssを書き換えることで解決しました。

    .js-accordion .container:target > dd {
      display: block;
      height: auto;
    }

Answer 2

ごめんなさい、回答する質問間違えました