アコーディオンで、開く前に対象箇所の頭にスクロールしたい。

Question

前提・実現したいこと

現在アコーディオンの作成をしているのですが、
①アコーディオンによる開閉
②該当箇所以外のアコーディオンが開いている場合は
閉じてから、クリックされたところを開く
③該当箇所が開く際に、該当箇所の頭にスクロールする

というアコーディオンを実現したく考えております。
ただし、現在作っているものですと、
③のところが、
開いてから該当箇所の頭に行くため、スクロールの仕方が不自然になってしまいます。これを開く前に、頭にスクロールし、該当のアコーディオンを開くようにするよう実現したいです。

該当のソースコード

<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>

.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;
}

// 下記のように続けて記載することも可能！
$(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 = i * $(".accordion-title").innerHeight() + $(".accordion-title").eq(0).offset().top;

        $('html,body').animate({ scrollTop: p}, 600,);
        //return false;
   });
 });

試したこと

 $(".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 = i * $(".accordion-title").innerHeight() + $(".accordion-title").eq(0).offset().top;

        $('html,body').animate({ scrollTop: p}, 600,);
        //return false;
   });

上記のclick内のソースの順番を変えたりしてみましたが、
特に変わりはありませんでした。
テストページhttps://codepen.io/satoru1993/pen/BajYPOL

何卒宜しくお願い致します。

Answer 1

.animate()のcomplete時にslideUpやslideToggleをするように書き換えてみてはいかがでしょう。

【jQueryのanimateで自由にアニメーションできるようになろう | webOpixel】
https://www.webopixel.net/javascript/507.html

【.animate() | jQuery API Documentation】
https://api.jquery.com/animate/

Comments

[satoru225Simple]

回答ありがとうございます。
こちら、記事を参考にいかにしてみたのですが、
動作しなくなりました。

$(function () {
$(".accordion-content").css("display", "none");

$(".accordion-title").click(function () {

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

$('html,body').animate({ scrollTop: p},{
'duration': 600,
'complete': function(){
$(".open").not(this).removeClass("open").next().slideUp(300);
$(this).toggleClass("open").next().slideToggle(300);
}
});
//return false;
});
});

入れ方が違うのでしょうか？

https://codepen.io/satoru1993/pen/BajYPOL

[kei344]

「this」が違うので、click関数内で変数に入れて、animateのthisをそれと置き換えてみてください。

[satoru225Simple]

ありがとうございます。
変数にすることで、
アコーディオンはうまくいくようになりました。
ただ、
開いてすぐ戻ってしまう状態になってしまいました。
https://codepen.io/satoru1993/pen/BajYPOL

[kei344]

$(that).addClass("open").next().slideDown(300);
ではどうでしょう。

[satoru225Simple]

ありがとうございます！
slideToggle
上記の記述は調べてみると、勝手に開閉してしまうことがあるというところまではわかっていたのですが、
kei344さんのおかげで、その場合の対処の方法がわかりました。
ありがとうございます！