Angular 5引导面板滚动

Question

当我单击列表中的链接元素（li）时，滚动出现问题。

 <!--List-->
      <ol>
        <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Cat 1</a></li>
        <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Cat 2</a></li>          
      </ol>

<!--Panel-->
      <div class="col-md-10 panel-group" id="accordion">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                Collapsible Group 1</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
              minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
              commodo consequat.
            </div>
            ...
          </div>
        </div>

当我单击列表中的某些元素时，先切换然后切换面板内容，但不滚动。