How can i scroll to the active accordion in bootstrap?

Question

I am using bootstrap accordion

  <div id="accordion" class="accordion">
    <div *ngFor="let mainRow of tableData; let i = index;" class="card red" id="mainRow-{{i}}">
      <div class="card-header table-header" id="auction-table-{{i}}">
        <table class="table-collapse-btn collapsed" [attr.data-toggle]="'collapse'" [attr.aria-expanded]="false"
          [attr.aria-controls]="'t-collapse-' + i" [attr.data-target]="'#t-collapse-'+i" id="proba-{{i}}" 
          (click)="renderSubTable(i, mainRow, $event, i)">
             ......
        </table>
      </div>
     
      </div>
    </div>
  </div>

there are a lot of accordions on my page. When i click big additional data gets displayed when the accordion is collapsed. The problem is that sometimes when the user is a lot of down on the page and clicks some of the uppper accordions on the window viewport then the accordion gets collapsed but the users still needs to scroll up to see the collapsed data.

To solve this issue i tried the following

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

but still - when i click on the accordion offset caulclation is not good - the scroll goes about 50 px down then the accordion position...

Is there any other way with which when i click on some accordion page will scroll directly to the position where the accordion starts ? The active one ?

i also tried

<div id="accordion" class="accordion">
    <div *ngFor="let mainRow of tableData; let i = index;" class="card" 
       id="mainRow-{{i}}">
         <div class="card-header table-header red" id="auction-table-{{i}}" 
         (click)="onClick(i)">
....

it gets scrolled now but not directly to the accordion it goes down again more then the auction position of the accordion

 onClick(index) {
    let el = document.getElementById(`auction-table-${index}`);
    el.scrollIntoView({behavior: 'smooth'});
  }