Как сделать переход к якорю, чтобы шапка не закрывала на чистом JS?

Question

[Alexander9229]

Нашел вот такой скрипт, для плавного перехода по якорным ссылкам, но не пойму, что можно здесь дописать, чтобы при скролле не мешала шапка?
Так как сама шапка фиксированная и при переходе может закрывать начало нужной секции

const menuLinks = document.querySelectorAll( '.menu__link' );

for ( let i = 0; i < menuLinks.length; i++ ) {
    menuLinks[i].addEventListener( 'click', function (event) {
        event.preventDefault();

        const blockId = event.target.getAttribute( 'href' ).substr(1);
        document.getElementById( blockId ).scrollIntoView( {
            behavior: 'smooth',
            block: 'start',
        } );
    } );
}

Answer 1

[Alexander9229]

Разобрался, кому интересно будет:

const menuLinks = document.querySelectorAll( '.menu__link' ),
        header = document.querySelector( '.header' );

    for ( let i = 0; i < menuLinks.length; i++ ) {
        menuLinks[i].addEventListener( 'click', function ( event ) {
            event.preventDefault();

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

        const scrollTarget = document.getElementById(href);

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

        window.scrollBy({
            top: offsetPosition,
            behavior: 'smooth'
        });
        } );
    }

Answer 2

[n1ksON]

Просто вычтите высоту шапки

Comments

[Alexander9229]

к чему именно нужно здесь зацепится, чтобы это сделать?