How to use the scrollIntoView in JavaScript with multilple elements?

Question

I have some boxes that lot of information. If the user click the button, the box will go to center of the body.

The code is working properly but I want to make the code on JQuery to make it short. Then the boxes above is 3 only, however if I use more than 10 boxes, there's a lot of code. Can you help me how to make the code in JQuery and how to make the code shorter?

var a = document.getElementsByClassName("indicator");

var b = document.getElementsByClassName("btn");

b[0].addEventListener("click", function() {

  a[0].scrollIntoView({
    behavior: "smooth",
    block: "start"
  });

});

b[1].addEventListener("click", function() {

  a[1].scrollIntoView({
    behavior: "smooth",
    block: "start"
  });

});

b[2].addEventListener("click", function() {

  a[2].scrollIntoView({
    behavior: "smooth",
    block: "start"
  });

});

* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  display: flex;
  justify-content: center;
  text-align: center;
}

h1,
p {
  color: white;
}

.wrapper {
  width: 90%;
  margin-top: 10px;
}

.box {
  margin: 10px;
  background: red;
}

.indicator {
  position: absolute;
  margin-top: -220px;
  color: red;
  opacity: 0;
}

.btn {
  width: 60%;
  margin: auto;
  padding: 6px;
  font-size: 20px;
  border: none;
  margin-bottom: 8px;
}

<div class="wrapper">

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <div class="box">

    <h1 class="Title"><span class="indicator">.</span>Hello World</h1>

    <p>Stack Overflow is a question-and-answer website for programmers. It is the flagship site of the Stack Exchange Network. It was created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on certain computer programming topics.bFounded
      in 2008 by Joel Spolsky and Jeff Atwood, two developers who wanted to make coding resources more accessible for all. Prosus acquired Stack Overflow for $1.8B in August 2021 , adding the company to their robust education technology portfolio.</p>

    <button class="btn">Scroll Into View</button>

  </div>

  <div class="box">

    <h1 class="Title"><span class="indicator">.</span>Hello World</h1>

    <p>Stack Overflow is a question-and-answer website for programmers. It is the flagship site of the Stack Exchange Network. It was created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on certain computer programming topics.bFounded
      in 2008 by Joel Spolsky and Jeff Atwood, two developers who wanted to make coding resources more accessible for all. Prosus acquired Stack Overflow for $1.8B in August 2021 , adding the company to their robust education technology portfolio.</p>

    <button class="btn">Scroll Into View</button>

  </div>

  <div class="box">

    <h1 class="Title"><span class="indicator">.</span>Hello World</h1>

    <p>Stack Overflow is a question-and-answer website for programmers. It is the flagship site of the Stack Exchange Network. It was created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on certain computer programming topics.bFounded
      in 2008 by Joel Spolsky and Jeff Atwood, two developers who wanted to make coding resources more accessible for all. Prosus acquired Stack Overflow for $1.8B in August 2021 , adding the company to their robust education technology portfolio.</p>

    <button class="btn">Scroll Into View</button>

  </div>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

Answer 1

In order to make this code scalable, you could instead listen to the click event on the parent, and traverse the DOM relative to the clicked button:

var wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', function (e) {
  e.stopPropagation(); // optional, to make the click stop as we will have  processed it
  
  var clickedButton = e.target;
  var elToScrollTo = clickedButton.closest('.box').querySelector('.indicator');

  elToScrollTo.scrollIntoView({ behavior: 'smooth', block: 'start' });
});

As you see the code got slimmed down significantly. Since the event listener is now attached to just a single element, it's much easier to .removeEventListener() (which you should always do to prevent memory leaks - but that's another story).