JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">
  click me to scroll
</button>

<div>
  <div class=myClass>
    first
  </div>
</div>
<div>
  <div class=otherClass>
  </div>
</div>
<div>
  <div class=otherClass>
  </div>
</div>
<div>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>

  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>
  <p>
    alsdfjafaa
  </p>

  <div class=myClass>
    shoul scroll to 2nd
  </div>
</div>







<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>

<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>

<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>

<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>
<p>
  alsdfjafaa
</p>

<div class=myClass>
  shoul scroll to 3rd
</div>

JavaScript

let scrollToNext = 0;
const elements = document.querySelectorAll('.myClass');

btn.addEventListener('click', () => {
  ++scrollToNext
  if (scrollToNext < elements.length) {
    elements[scrollToNext].scrollIntoView();
  }
})