JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
  <div id="content">
   CONTENT TOP
   <span id="content-bottom">CONTENT BOTTOM</span>
  </div>
</div>
<button id="reset">Reset scorllTop</button>
<button id="b1">jQuery.scrollTop(Number.MAX_SAFE_INTEGER)</button>
<button id="b2">jQuery.scrollTop(300)</button>
<button id="b3">element.scrollTop = Number.MAX_SAFE_INTEGER</button>
<button id="b4">element.scrollTop = 300</button>

CSS

#box {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #000;
}

#content {
  height: 400px;
  position: relative;
}
#content-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

JavaScript

$('#reset').click(function () {
	$('#box').scrollTop(0);
});

$('#b1').click(function () {
	$('#box').scrollTop(Number.MAX_SAFE_INTEGER);
});

$('#b2').click(function () {
	$('#box').scrollTop(300);
});

$('#b3').click(function () {
	document.querySelector('#box').scrollTop = Number.MAX_SAFE_INTEGER;
});

$('#b4').click(function () {
	document.querySelector('#box').scrollTop = 300;
});