jQueryで作ったアコーディオンを開いたタイミングでスクロールさせたい
Discussion
Closed
jQueryアコーディオン
jQueryで作ったアコーディオンボタンをクリックして開いたタイミングで#currentPosの位置まで開いたアコーディオンをスクロールさせたいのですが、想定している動きをしていないため、どなたかご教授いただきたいです。
Web制作初心者のため、お見苦しいかと思いますが、よろしくお願いいたします。
発生している問題・エラー
変数scrollに格納している内容がうまく動作していません。
該当するソースコード
//アコーディオン
$('.c-accordion-btn').on('click', function() {
$(this).toggleClass('open');
if($(this).hasClass('open')) {
var scroll = $('#currentPos').offset().top - 200;
$('html, body').animate({scrollTop: scroll});
}
$(this).next().slideToggle(900, 'swing');
$('.c-accordion-btn').not($(this)).next().slideUp();
$('.c-accordion-btn').not($(this)).removeClass('open');
});
以下、html
<div id="currentPos" style="position:fixed; width:1px; height:1px;"></div>
<div class="c-accordion u-mb20"><!-- .c-accordion -->
<h2 class="c-container__title c-accordion-btn u-view u-view-up">タイトル</h2>
<div class="c-accordion__cts u-mb70"><!-- .c-accordion__cts -->
<div class="c-container__flex"><!-- .c-container__flex -->
<div class="c-container__flex-items u-mt20"><!-- .c-container__flex-items -->
<div class="c-description u-fs21"><!-- .c-description -->
<p class="c-description-year u-fw-b">2023</p>
<dl class="c-description-cts">
<dt>プロダクト</dt>
<dd>プロダクト内容</dd>
<dt>Director</dt>
<dd>XXXXXX XXXXX</dd>
</dl>
</div><!-- /.c-description -->
</div>
<div class="c-container__flex-items u-mt20"><!-- .c-container__flex-items -->
<a href="#" class="c-container__thumb" target="_blank"><img src="/images/xxx.jpg" alt=""></a>
</div><!-- .c-container__flex-items -->
</div><!-- /.c-container__flex -->
</div><!-- /.c-accordion__cts -->
</div><!-- /.c-accordion -->
0
