bootstrap 4选项卡无法顺利滚动

Question

使用bootstrap 4和平滑滚动时遇到问题。当我使用标签。不规则地向上和向下滚动。但在使用导航链接时工作

这是我的引导代码（这里是我的问题）：

  <div class="second-index">
     <div class="container" id="program">
        <div class="row justify-content-center">
          <div class="col-lg-12" style="">
              <ul class="nav nav-pills mb-3 nav-justified"id="pills tab" 
                  role="tablist">  
                  <li class="nav-item index-nav-tab">
                    <a class="nav-link second-tab active" 
                      id="pills-home-tab" data-toggle="pill" href="#pills-
                          home" role="tab" aria-controls="pills-home" 
                          aria-selected="true">

                        <h2 class="title-level3">PAUD SILA KUMARA </h2>
                    </a>
                  </li>
              </ul>
            </div>
        </div>
   <div class="tab-content" id="pills-tabContent">
       <div class="tab-pane fade show active" id="pills-home"  
          role="tabpanel" aria-labelledby="pills-home-tab">
            <p>Est pariatur eiusmod cillum deserunt aliquip est dolore in non deserunt aliquip est dolore in non.</p>
        </div>
   </div>             
  </div>
 </div>

这是我的js代码（滚动平滑）：

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {

      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});