[Ubivectel]

После долгих мучений сочинил вот такое:

<span class="smile-m">
   кнопка
</span>
<div class="smiles-modal">
    <div class="smile-overlay">
    <div class="height" style="height: 350px;overflow: auto;">
        <div class="tab-b" id="tab-0" style="display: block;">
        смайлы
        </div>
        <div class="tab-b" id="tab-1">
        смайлы
        </div>
        <div class="tab-b" id="tab-2">
        смайлы
        </div>
        <div class="tab-b" id="tab-3">
        смайлы
                </div>
        </div>
        <div class="tabs-header">
            <a href="#tab-0" class="tab-h actives" data-tab="0"></a>
            <a href="#tab-1" class="tab-h" data-tab="1"></a>
            <a href="#tab-2" class="tab-h" data-tab="2"></a>
            <a href="#tab-3" class="tab-h" data-tab="3"></a>
        </div>
    </div>
    <script>
    window.onload = function() {
        document.querySelector('.tabs-header').addEventListener('click', ftabs);

        function ftabs(event) {
            if (event.target.className == 'tab-h') {
                let dataTab = event.target.getAttribute('data-tab');
                let tabH = document.getElementsByClassName('tab-h');
                for (let i = 0; i < tabH.length; i++) {
                    tabH[i].classList.remove('actives');
                }
                event.target.classList.add('actives')
                let tabBody = document.getElementsByClassName('tab-b');
                // for (let i = 0; i < tabBody.length; i++) {
            }
        }
    }

    document.querySelectorAll('a[data-tab^="#"').forEach(link => {
    link.addEventListener('click', function(e) {
    e.preventDefault();

    let href = this.getAttribute('data-tab').substring(1);

    const scrollTarget = document.getElementById(data-tab);

    // const topOffset = document.querySelector('.scrollto').offsetHeight;
    const topOffset = 0; // если не нужен отступ сверху 
    // const elementPosition = scrollTarget.getBoundingClientRect().top;
    const offsetPosition = elementPosition - topOffset;

    window.scrollBy({
        top: offsetPosition,
        behavior: 'smooth'
    });
});
});
    </script>

Оно работает, но при переключении табов "дергается" вся страница, если я правильно понимаю элемент

<span class="smile-m">
   кнопка
</span>

выравнивается на странице по вертикали, и к табам:

<a href="#tab-0" class="tab-h actives" data-tab="0"></a>
            <a href="#tab-1" class="tab-h" data-tab="1"></a>
            <a href="#tab-2" class="tab-h" data-tab="2"></a>
            <a href="#tab-3" class="tab-h" data-tab="3"></a>

класс actives добавляется при клике, очень бы хотелось что бы он добавлялся при ручной прокрутке к соответствующему блоку. вот как оно сейчас: https://noviy-kovcheg.ru/smoking