Странное поведение scrollTop с .offset (). Top

Question

Я использую OnsenUI framework, но в основном это просто HTML-код, который работает в браузере так же, как и в мобильном.

Разметка выглядит так:

<ons-page id="main-page">
    <div class="page__content">

        <div class="container">

            <div class="cat-header-tab-001">Title</div>
            <div class="tab-001">Content</div>

            <div class="cat-header-tab-002">Title</div>
            <div class="tab-002">Content</div>

            <div class="cat-header-tab-003">Title</div>
            <div class="tab-003">Content</div>
        </div>
    </div>
</ons-page>

page__content - это прокручиваемый контейнер.

Когда я нажимаю на ссылку (липкий заголовок), которая должна прокручиваться кконкретный div, он отлично работает с :

document.getElementById('cat-header-'+tab_id).scrollIntoView();

Проблема в том, что он не плавный, и я не могу дать ему смещение с scrollIntoView().

Поэтому я попытался использовать:

$('#main-page .page__content').animate({
    scrollTop: $('#cat-header-'+tab_id).offset().top
});

И этот также работает , но есть странная проблема.Если я нажимаю на ссылку один раз, она нормально прокручивается.Если я снова нажму на ссылки, они прокрутятся в другое место на странице.Если я щелкну в третий раз, он прокрутится вниз.Я предполагаю, что он каким-то образом вычисляет смещение каждый раз, когда я нажимаю, и поскольку page__content прокручивает, он вычисляет оттуда снова неверно.

Есть ли способ, чтобы предотвратить неправильный переход при повторном нажатии на ссылку?