@Alexander9229

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

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

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',
        } );
    } );
}
  • Вопрос задан
  • 59 просмотров
Решения вопроса 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'
        });
        } );
    }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@n1ksON
Интерн
Просто вычтите высоту шапки
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы