<div class="buttons">
  <button class="button" data-target="#block_1">Block 1</button>
  <button class="button" data-target="#block_2">Block 2</button>
</div>
<div class="container">
  <div class="block" id="block_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio aliquid dolorem impedit optio pariatur consequatur sit culpa voluptate? Eligendi amet provident eveniet iste id! Asperiores possimus reprehenderit magni laudantium magnam vero quo iusto quis assumenda incidunt modi, laboriosam unde, natus ullam praesentium animi recusandae veniam alias dolorem accusamus expedita neque hic eum molestiae? Sed vitae quo culpa facilis sapiente quisquam maxime quae, minima libero asperiores quibusdam optio veniam repellat! Maxime, deserunt et eligendi quam ab consectetur dolores vitae quibusdam tempore laboriosam architecto expedita, eos aut rerum culpa omnis necessitatibus! Deleniti ratione minima suscipit assumenda eveniet harum natus provident inventore.</div>
  <div class="block" id="block_2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil vel eum. Dolor est nam explicabo quae officiis labore velit molestias, eos eligendi. Sit maiores vitae, numquam at molestias quia laboriosam fugiat tenetur harum delectus modi ea totam atque beatae quam, reprehenderit dolorem omnis, sint mollitia cum consectetur nihil? Eligendi velit cumque aliquid, harum magni debitis labore eos recusandae quia nesciunt unde at excepturi inventore iusto quaerat sint obcaecati tempore quis reiciendis numquam tempora optio pariatur exercitationem! Voluptatum facere aliquid repellendus molestiae, asperiores ad sequi ex. Nobis aliquam accusantium soluta quaerat aperiam fugit, ea quae, iste, maxime rerum sint repellendus?</div>
</div>

body {
  margin: 0;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
  display: flex;
}

.buttons {
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.button {
  padding: 10px 20px;
  font: inherit;
}

.button:not(:last-child) {
  margin-bottom: 10px;
}

.container {
  width: 300px;
  height: 200px;
  overflow: auto;
}

.block {
  padding: 10px;
}

.block:not(:last-child) {
  margin-bottom: 10px;
}

const buttons = document.querySelectorAll('button[data-target]');

for (let button of buttons) {
  button.addEventListener('click', event => {
    event.preventDefault();
    
    const target = document.querySelector(button.dataset.target);

    if (target) {
      target.scrollIntoView({
        behavior: 'smooth'
      });
    }
  });
}