SO-75373156

by David Thomas

HTML

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

CSS

body {
  margin: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  /*background: #002164;*/
  background-color: hsl(200deg 70% 70% / 0.4);
}

.hero {
  min-height: calc(100vh - 100px);
  background: #fff;
}

.booking__module {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #BC0B3C;
}

.booking__search {
  height: 600px;
  background: #ccc;
}

.booking__button {
  height: 20px;
  margin: 40px;
}

.others {
  height: 200vh;
}

JavaScript

// we pass a reference to the Event Object ('evt') to the function:
document.querySelector('.booking__button').addEventListener('click', (evt) => {
  // we retrieve the closest ancestor <section> element of the element
  // to which the event-handler is bound, and retrieve the 'top' property
  // of its bounding-client rect:
  let {
    top
  } = evt.currentTarget.closest('section').getBoundingClientRect();

  // we then scroll to that value:
  window.scrollTo(0, top);
});