アコーディオン開閉時に、押したボタンの上にスクロールするようにしたい

Question

前提・実現したいこと

アコーディオンで、スマホで見たときに、
開閉時に押したボタンに連なるコンテンツの
TOP（ボタンの一番上）ではなく、
中途半端に開いてしまうため、
アコーディオン開閉時に、ボタンを押したら、
そのボタンの一番上にスクロールするようにしたいです。

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

現在、単純な開閉時にはスクロールするように
なっていますが、
例えば
「テスト１」
を開いている状態で
「テスト２」や「テスト３」を押すと、
中途半端なところにスクロールしてしまいます。

該当のソースコード

<div id="accordion" class="accordion-container">
  <p class="accordion-title">北海道・東北</p>
  <div class="accordion-content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p><p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p><p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p><p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p><p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p><p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <p class="accordion-title">関東</p>
  <div class="accordion-content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <p class="accordion-title">東京</p>
  <div class="accordion-content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <p class="accordion-title">東海・北陸</p>
  <div class="accordion-content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <p class="accordion-title">甲信越</p>
  <div class="accordion-content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <p class="accordion-title">関西</p>
  <div class="accordion-content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <p class="accordion-title">中・四国</p>
  <div class="accordion-content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <p class="accordion-title">九州・沖縄</p>
  <div class="accordion-content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
</div>

// 下記のように続けて記載することも可能！
$(function () {
   $(".accordion-content").css("display", "none");
        
   $(".accordion-title").click(function () {
     $(".open").not(this).removeClass("open").next().slideUp(300);
     $(this).toggleClass("open").next().slideToggle(300);
        var i = $(".accordion-title").index(this)
        var p = $(".accordion-title").eq(i).offset().top;
        $('html,body').animate({ scrollTop: p}, 600,);
        //return false;
   });
 });

.accordion-container .accordion-title {
  position: relative;
  margin: 0;
  padding: 0.625em 0.625em 0.625em 2em;
  background-color: #000;
  font-size: 1.25em;
  font-weight: normal;
  color: #fff;
  cursor: pointer;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-title.open { 
 background-color: #244ab3;
}

.accordion-container .accordion-title::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 15px;
  height: 2px;
  /*縦線に*/
  transform: rotate(90deg);
  background: #fff;
  transition: all .3s ease-in-out;
}

.accordion-container .accordion-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  /*横線*/
  width: 15px;
  height: 2px;
  background: #fff;
  transition: all .2s ease-in-out;
}

.accordion-container .accordion-title.open::before {
  transform: rotate(180deg);
}

.accordion-container .accordion-title.open::after {
  opacity: 0;
}

.accordion-content {
  padding-left: 2.3125em;
  border: 1px solid #0079c1;
}

試したこと

画面の縦幅分動いてしまうのかと思い、
その分を「scrollTop: p」から引いてみましたが、
特に変化はありませんでした。

こちら、現在作成途中のものになります。
アコーディオンテストページ

何卒お力添えをいただけますと幸いです。
宜しくお願い致します。

Answer 1

閉じる前のaccordion-titleの上部座標を取得してしまうからこのようなことになると思われます。すべてのタイルが同じ高さなので一応以下のようにすれば期待通りの動作にはなります。

var p = i * $(".accordion-title").innerHeight() + $(".accordion-title").eq(0).offset().top;

Comments

[satoru225Simple]

迅速に返答をくださり、ありがとうございました！
おかげさまで、自分が望んでいた形になりました！