Плавная прокрутка для привязки с прокруткой, но на 100px выше

Question

Я пытаюсь сделать эффект плавной прокрутки к якорям на моей странице, но мне нужно прокрутить его на 100 пикселей выше из-за липкого заголовка. Не хочу использовать JQuery там. Я попытался добавить псевдокласс к блоку с привязкой, как это:

div:target:before {
  content: '';
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}

Это не сработало, оно перекрывало блок выше. Затем я попытался прокрутить его по слушателю событий:

window.addEventListener("hashchange", function () {
  window.scrollTo(window.scrollX, window.scrollY - 100);
});

Работает только без свойства прокрутки. Есть ли решение? Спасибо!

Answer 1

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

window.scrollTo(...)

с

document.getElementById('yourElemId').scrollIntoView({behavior: "smooth", block: "end"});

yourElemId - это идентификатор элемента с привязкой.

Вот документация для scrollIntoView