Bootstrap 4手風琴滾動到點擊活動卡頂部

Question

這似乎是我的問題有already been answered here - 這是我正在尋找的確切功能。但隨着Bootstrap 4的新版本，他們將手風琴轉換爲使用卡片，而不是面板。我無法理解js以適應他們的新結構。

基於關閉BS3答案，我覺得應該是這樣的，但我不能得到它的工作：一BS4手風琴

$('.card-header').on('shown.bs.collapse', function(e) { 
    var $card = $(this).closest('.card'); 
    $('html,body').animate({ 
    scrollTop: $card.offset().top 
    }, 500); 
}); 

HTML如下：

<div id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingOne"> 
     <h5 class="mb-0"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h5> 
    </div> 

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingTwo"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h5> 
    </div> 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingThree"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h5> 
    </div> 
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

我擺弄了一些BS3片段，並最終找出了我的問題 - 我正在調出.card-header，當時我本應該瞄準.collapsed內容。我的工作解決方案如下。

$('.collapse').on('shown.bs.collapse', function(e) { 
    var $card = $(this).closest('.card'); 
    $('html,body').animate({ 
    scrollTop: $card.offset().top - 50 
    }, 500); 
});