JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="page">
		<button onClick="ButtonClick();">Scroll</button>
		<br><br><br><br><br><br><br><br><br>
		<div id="scrollable">
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<text id="scrolled">I want to scroll all scrollbars 
			to this element.</text>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</div>
</body>

CSS

html {background-color: white;}
body {text-align: center; background-color: papayawhip;}
#page {
	display: inline-block;
	text-align: left;
	width: 300px;	height: 500px;
	overflow: auto;
	background-color: powderblue;
	padding: 10px;
}
#scrollable {
	height: 500px;
	overflow: auto;
	background-color: pink;
}

JavaScript

function ReportExpressionValue(ExpressionString) {
  return ExpressionString + " == " + eval(ExpressionString) + "\n";
}

function ButtonClick() {
  var scrollable = document.querySelector('#scrollable');
  var scrolled = document.querySelector('#scrolled');
  alert(
    ReportExpressionValue("scrollable.scrollTop") +
    ReportExpressionValue("scrolled.offsetTop") +
    ReportExpressionValue("(scrolled.offsetParent == document.body)")
  );
  scrollable.scrollTop = scrolled.offsetTop;
}