How do I bring the block up to the header by scrolling when the button is clicked?

Question

I'm trying to make it so that when you click on the button with the class .booking__button, the block scrolls up under the header. Position should not change, only scroll. This is done so that the search results of the booking module, which, would be visible to the user. I found the code that does the scrolling, but it works with the exact number, now 100px, but you understand that this distance will be different for everyone, depending on the height of the screen.

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

body {
  margin: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #002164;
}

.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;
}

<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>

Does this answer your question? [How do I scroll to an element using JavaScript?](https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript) — Diego D, Feb 07 '23 at 13:04

score 1 · Answer 1 · answered Feb 07 '23 at 12:37

One approach is below, with explanatory comments in the code. Note that while I changed the background-color of the <header> element, that's simply to visualise the functionality and is not at all required:

// 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);
});

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;
}

<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>

JS Fiddle demo.

References:

How do I bring the block up to the header by scrolling when the button is clicked?

1 Answers1