counter.html

<style>
    .rolling-number-animate {
        transition: bottom var(--numberSrcollLength) linear, width var(--numberSrcollLength) linear;
        position: relative;
    }

    .rolling-numbers-number {
        transition: color calc(var(--numberSrcollLength) / 5) linear;
        font-family: sans-serif;
        font-size: 40px;
    }

    .column-container {
        overflow: hidden;
        width: fit-content;
    }

    .row-container {
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction: row;
    }

    body {
        height: 100%;
    }
</style>

<body>
    <div id="container" class="">

    </div>
    <input type="number" id="start">
    <button id="button">scroll to this</button>
</body>
<script type="text/javascript" src="counter.js"></script>
<script>
    
    var row = new RollingNumbers(document.getElementById("container"), 1234.56);
    document.getElementById("button").addEventListener("click", () => {
        row.changeNumber(document.getElementById("start").value, 1000);

    })
</script>