Javascript 单击以滚动到div JQuery中无法正常工作的内容

我有一个选项卡式的部分，它的内容在div中根据点击的链接位置滚动，但滚动不正常，下面是

这是单击时触发的代码

$(document).ready(function ($){
    $('.scrollable_tab > ul > li > a[href^="#"]').on('click', function(event) {
        var target = $(this.getAttribute('href'));
        if( target.length ) {
            event.preventDefault();
            $('.scrollable_content_main').stop().animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    });
});

---

请帮忙

您还需要考虑container div。 像这样试试

$('.scrollable_tab > ul > li > a[href^="#"]').on('click', function(event) {
        var target = $(this.getAttribute('href'));
        console.log($(".scrollable_content_main").scrollTop()+target.offset().top );
        if( target.length ) {
            event.preventDefault();
            $('.scrollable_content_main').animate({
                scrollTop: $(".scrollable_content_main").scrollTop() + target.offset().top 
            }, 1000);
        }
    });

小提琴：