JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
    <div class="scrollable_div" id="div_to_scroll">
        <table class="big_table">
            <tr>
                <td>Hello</td>
            </tr>
            <tr>
                <td>Hello</td>
            </tr>
            <tr>
                <td>Hello</td>
            </tr>
            <tr>
                <td>Hello</td>
            </tr>
            <tr>
                <td>Hello</td>
            </tr>
            <tr>
                <td>Hello</td>
            </tr>
            <tr>
                <td>Hello</td>
            </tr>
            <tr>
                <td>Hello</td>
            </tr>
        </table>
    </div>
    <input type="button" onClick="scrollContainerToTop(100, 'div_to_scroll');" value="Scroll div up">
</body>

CSS

div.scrollable_div {
    align-content: center;
    width: 400px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
    overflow-x: hidden;
}
table.big_table td {
    padding: 40px;
}

JavaScript

function scrollContainerToTop(scrollDuration, container_id) {
    const container = document.getElementById(container_id),
    scrollHeight = container.scrollTop,
    scrollStep = Math.PI / (scrollDuration / 15),
    cosParameter = scrollHeight / 2;
    var scrollCount = 0,
        scrollMargin,
        scrollInterval = setInterval(function () {
            if (container.scrollTop != 0) {
                scrollCount = scrollCount + 1;
                scrollMargin = cosParameter - cosParameter * Math.cos(scrollCount * scrollStep);
                container.scrollTop = (scrollHeight - scrollMargin);
            } else clearInterval(scrollInterval);
        }, 15);
}