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><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>
            <div id="scrolled">I want to scroll all scrollbars to this element.</div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
           ...

CSS

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

JavaScript

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

    function ButtonClick() {
    		/*
        var scrollable = document.querySelector('#scrollable');
        var scrolled = document.querySelector('#scrolled');
        alert(
            ReportExpression("scrollable.scrollTop") +
            ReportExpression("scrolled.offsetTop") +
            ReportExpression("(scrolled.offsetParent == document.body)")
        );
        scrollable.scrollTop = scrolled.offsetTop;
        */
        
        element = document.getElementById("scrollable");
				alignWithTop = true;
				element.scrollIntoView(alignWithTop);
        
        elementB = document.getElementById("scrolled");
				alignWithTopB = true;
				elementB.scrollIntoView(alignWithTopB);
        
    }