Bootstrap v4: выделите раздел «Содержимое вкладки» при щелчке элемента навигации «Вкладка».

Question

У меня есть содержимое Tabbable ниже с nav-item & tab-content:

<nav>
 <div class="nav nav-tabs my-tabs" id="nav-tab" role="tablist">
  <a class="nav-item nav-link active" id="nav-buy" data-toggle="tab" href="#navBuy" role="tab" aria-controls="navBuy" aria-selected="true">Buy</a>
  <a class="nav-item nav-link" id="nav-rent" data-toggle="tab" href="#navRent" role="tab" aria-controls="navRent" aria-selected="false">Rent</a>
 </div>
</nav>

<div class="tab-content" id="nav-tabContent">
 <div class="tab-pane fade show active" id="navBuy" role="tabpanel" aria-labelledby="nav-buy">Buy property</div>
 <div class="tab-pane fade" id="navRent" role="tabpanel" aria-labelledby="nav-rent">Rent property</div>
</div>

Выше Tabs - нижняя часть над сгибом, а tab-content - под сгибом.

Попробовал ниже код jQuery для прокрутки к содержимому вкладки при нажатии элемента nav:

$(document).ready(function () {

$('.my-tabs>li a').on('shown.bs.tab', function () {
    $('html, body').animate({
        scrollTop: $('.tab-content').offset().top
    }, 'slow');
});

});

Однако этот код jQuery не работает, и страницы не прокручиваются при щелчке.