JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<button>
 Scroll
</button>

CSS

.container {
  height: 100px;
  overflow: auto;
  scroll-behavior: smooth;
}

.box {
  width: 100px;
  height: 50px;
  background: #AAD;
  margin-bottom: 10px;
}

JavaScript

document.querySelector('button').addEventListener('click', () => {
	const container = document.querySelector('.container')
	container.scrollTo({
  	top: container.scrollTop + 100,
    behavior: 'instant'
  })
})