Как на чистом Javascript сделать смещение при клике по якорной ссылке?

Question

[transcend]

Добрый день.

В мобильной версии сайта хэдер зафиксирован, css - fixed. При клике по якорной ссылке элемент, к которому данная ссылка ведет - спрятан за хэдером.

Нужен самый простой способ, чтобы при прокрутке добавлялся отступ и элемент позиционировался под фиксированным хэдером.

Comments

[WbICHA]

Дубль. Как сделать смещение при плавной прокрутке к якорной ссылке?

[Вадим]

4. После размещения вопроса пользователю запрещается осуществлять:
4.1. Дублирование вопроса, который уже размещался на страницах Сервиса. В том числе и в случае, если вопрос был удалён модератором, или на вопрос не был дан ответ (т.е. категорически запрещается дублирование вопроса с целью повторного привлечения к нему внимания).

[transcend]

Вадим, прошу прощения. Удалил второй вопрос

Answer 1

[Артур Ш]

const anchors = document.querySelectorAll('a[href*="#"]');
    for (let anchor of anchors) {
        if (anchor.getAttribute('href').indexOf('http') == -1) {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const blockID = anchor.getAttribute('href').substr(1);
                if (document.getElementById(blockID)) {
                    document.getElementById(blockID).scrollIntoView({
                        behavior: 'smooth',
                        block:  'center'
                    });
                }
            });
        }
    }

Этот код вешает плавный скролл на все якоря на страницы.
Подробности в документации