Как при клике на кнопку, понять блок до шапки сайта?

Question

[hooli-gun]

Возможно ли как-то сделать так, чтобы при нажатии на кнопку .booking__button, блок с ней поднимался вверх, прямой под шапку? Это все пытаюсь сделать, потому что результаты поиска модуля бронирования, находятся вне поля видимости пользователя, и было бы лучше что бы при щелкните на кнопку, он подскорил прям под шапку. Я нашел код, который делает скрол, но он работает с точной цифрой, сейчас 300px, но сами понимаете, что это расстояние у всех будет разное. И вот знатокам вопроса, как это реализовать?

<header class="header"></header>
<main class="hero"></main>
<section class="booking">
  <button class="booking__button">booking</button>
</section>
<section class="others"></section>

body {
  margin: 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #4a6ee0;
}
.hero {
  min-height: 100vh;
  background: #000;
}
.booking {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f00;
}
.booking__button {
  height: 20px;
  margin: 40px;
}
.others {
  height: 2000px;
}

document.querySelector('.booking__button').addEventListener('click', () => { window.scrollTo(0, 300); });

Comments

[Одиночка Айс]

Поставить 0 и проверить, не судьба? И почему разное у всех будет?

[hooli-gun]

Одиночка Айс, Не просто скрол вверх, а должно быть так:

[hooli-gun]

hooli-gun, main 100vh - header 60px

[Одиночка Айс]

hooli-gun, то есть вам до верха чтобы оставалось 60 пикселей? Ну так и ставьте 60

[Одиночка Айс]

hooli-gun, или чтобы снизу всегда 60 было?

[hooli-gun]

Одиночка Айс, Верно. А куда ставить? window.scrollTo(0, 60)

Answer 1

[HardBot]

.booking {
   position: absolute;
   width: 100%;
}

document.querySelector('.booking__button').addEventListener('click', () => {
    document.querySelector('.booking').style.top = '60px'
    window.scrollTo(0, 60)
})

Comments

[hooli-gun]

Позеционированием это не совсем то, только скрол.

[HardBot]

hooli-gun, изменил! К тому же, у тебя написано, что нужно поднять блок до шапки, он поднялся. В чём проблема?

[hooli-gun]

Я может не так написал, извиняюсь, имел ввиду скролом только.

[hooli-gun]

Модуль бронирования показывает резульаты поиска, прям под собой и вот они не видны, и нужно что бы сам блок бронирования доскролил до шапки