ScrollIntoView срабатывает через раз?

Question

[Alex Ozerov]

ScrollIntoView срабатывает не всегда по клику. То есть бывает после клика он на(приблизительно) 10 пикселей сдвинет вниз и на этом все. Иногда срабатывает как надо и скролит куда я указал. Проблема только в google chrome. Версия 85.

<nav class="burger__main__menu">
                <ul class="burger__menu_list">
                    <li class="burger__menu_item">
                        <a href="#" class="">Массаж</a>
                    </li>
                    <li class="burger__menu_item">
                        <a href="#" class="">Еффект</a>
                    </li>
                    <li class="burger__menu_item">
                        <a href="#" class="">Для кого</a>
                    </li>
                    <li class="burger__menu_item">
                        <a href="#" class="">Майстер</a>
                    </li>
                    <li class="burger__menu_item">
                        <a href="#" class="menu_link_video_burger">Відео</a>
                    </li>
                    <li class="burger__menu_item">
                        <a href="#" class="">Відгуки</a>
                    </li>
                    <li class="burger__menu_item">
                        <a href="#" class="">Питання</a>
                    </li>
                </ul>
            </nav>

const processElement = document.getElementById('process');
const processButton = document.querySelector('.menu_link_video');

function handlerVideo(e){
    e.preventDefault();
    processElement.scrollIntoView({
        block: "start",
        behavior: "smooth"
    })
}
processButton.addEventListener('click', handlerVideo)

Пробовал делать не с тегом "а" но это ничего не изменило. Думал, может в функцию попадает клик не по гиперсылке, а по тегу 'li' но это тоже не верно .

Answer 1

[Steppp]

https://codepen.io/Steppp/pen/NWNwJzV
Или
const processElement = document.getElementById('process');
const burgerMainMenu = document.querySelector('.burger__main__menu');

function handlerVideo(id){
const element = document.querySelector(`#${id}`);
element.scrollIntoView({
block: "start",
behavior: "smooth"
})
}

function menuClick(evt) {
evt.preventDefault();
if (evt.target.closest(`.burger__menu_item`)) {
let link = evt.target.closest(`.burger__menu_item`).querySelector(`.menu_link_video_burger`);
let id = clesrSharp(link);
handlerVideo(id);
}
}

function clesrSharp(tag) {
const res = tag.hash.replace('#','');
return res;
}

burgerMainMenu.addEventListener('click', menuClick);