Как сделать плавный якорь?

Question

[Emil7676]

Написал вот такой код на Js, он делает плавную прокрутку якорем, но он прокручивает прям в притык, то есть до этого объекта, а нужно чтобы он прокручивал до него и допустим еще 100 пикселей в верх, кто знает как это сделать?
Я хочу чтобы объект после прокрутки находился на посередине, а он прокручивает впритык.

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

for (let anchor of anchors) {
    anchor.addEventListener("click", function(event) {
        event.preventDefault();
        const blockID = anchor.getAttribute('href')
        document.querySelector('' +blockID ).scrollIntoView({
            behavior: "smooth",
            block: "start"
            })
})
}

Answer 1

[penushkin]

const scrollIntoViewWithOffset = (selector, offset) => {
  window.scrollTo({
    behavior: 'smooth',
    top:
      document.querySelector(selector).getBoundingClientRect().top -
      document.body.getBoundingClientRect().top -
      offset,
  })
}

Comments

[Emil7676]

Извините, не понял куда что вписывать? Можете объяснить?

[penushkin]

ну смысл в том что бы не скролить до объекта а рассчитывать на сколько нужно проскролить

[Emil7676]

penushkin, Мне типо свой код удалить и это вставить? Где указать значение прокрутки?

[penushkin]

const scrollIntoViewWithOffset = (selector, offset) => {
  window.scrollTo({
    behavior: 'smooth',
    top:
      document.querySelector(selector).getBoundingClientRect().top -
      document.body.getBoundingClientRect().top -
      offset,
  })
}

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

for (let anchor of anchors) {
  anchor.addEventListener("click", function(event) {
    event.preventDefault();
    const blockID = anchor.getAttribute('href')
    scrollIntoViewWithOffset('' + blockID, 200)
  })
}

[Emil7676]

penushkin, То что нужно! Благодарю!