Что-то не понимаю, почему не работает этот javascript?

Question

[MarkelovNNN]

Всем привет!

Ребята, подскажите, почему не работает этот код?

const anchors = document.querySelectorAll('a[href^="#"]');

anchors.forEach((anchor) => {
  anchor.addEventListener('click', function (e) {
		e.preventDefault();
    
		const blockID = anchor.getAttribute('href').substr(1);
		
		document.getElementById(blockID).scrollIntoView({
		  behavior: 'smooth',
		  block: 'start'
		});

		let clientWidth = document.documentElement.clientWidth;
		if (clientWidth >= 992) {
			window.scrollBy(0, -88);
		} else {
			window.scrollBy(0, -13);
		}
	});
});

Мне необходимо, чтобы произошла плавная прокрутка к якорю, а после этого произошло перемещение прокрутки вверх на высоту шапки, но почему-то перехода к якорю не происходит, а производится только смещение вверх.

Comments

[WapSter]

3 вопроса без решения, этот уже по сути повторяется. Пожалуй пройду мимо.

[Robur]

WapSter, Да, этот код ему в прошлом вопросе написали, даже спасибо не сказал, а теперь надо чтобы кто-то еще посмотрел и исправил. Пожалуй пройду с вами.

[Andrew]

Ладно-ладно

[MarkelovNNN]

Robur, В той теме отметил решением, хотя других читателей может ввести и в заблуждение, так как вопрос был в том, чтобы jQuery заменить javascript.

Answer 1

[Renhor]

Попробуйте изменить

const blockID = anchor.getAttribute('href').substr(1);

на

const blockID = e.target.getAttribute('href').substr(1);

Comments

[MarkelovNNN]

Спасибо, но, к сожалению, это ничего не изменило. Я думаю, проблема в том, что действия (плавный переход и отступ) запускаются одновременно, а как сделать последовательно, чтобы сначала проходил плавный переход, а только потом запускался отступ, не понятно.

[Renhor]

setTimeout(() => {
    let clientWidth = document.documentElement.clientWidth;

    if (clientWidth >= 992) {
      window.scrollBy(0, -88);
    } else {
      window.scrollBy(0, -13);
    }
}, 300)

[MarkelovNNN]

Renhor, Спасибо, но, к сожалению, это так называемый костыль: на короткой прокрутке сработает, а на длинной нет. Если увеличить время ожидания, то на короткой прокрутке будет сильно длинным ожидание.

[Renhor]

MarkelovNNN, ну да, костыль. Вот тут рабочий код

Stak Overflow

[MarkelovNNN]

Renhor, Спасибо, буду разбираться.