Bootstrap v4：在“标签”导航项上单击，滚动到“标签内容” div

Question

我有以下nav-item和tab-content的Tabbable内容：

<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是下面的翻折。

在单击Nav-item时，尝试在jQuery代码下面滚动到选项卡内容：

$(document).ready(function () {

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

});

但是，此jQuery代码不起作用，单击时页面也无法滚动。