JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div id="wrapper">
    <div id="page">

<a id="trigger" href="#">Animated Scroll</a>

<div id="element"> Hello You </div>

</div>
</div>

CSS

#wrapper { height: 200px; overflow: scroll; border: 1px solid #e3e3e3;}

#page { height:5000px; position:relative; }

#element { position:absolute; top:600px }

JavaScript

var wrapper = document.getElementById('wrapper');

function scroll(scrollTo, time) {
    var scrollFrom = parseInt(wrapper.scrollTop),
        i = 0,
        runEvery = 5; // run every 5ms
    
    scrollTo = parseInt(scrollTo);
    time /= runEvery;
    
    var interval = setInterval(function () {
        i++;
        
        wrapper.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom;
       
        if (i >= time) {
            clearInterval(interval);
        }
    }, runEvery);
}

$('#trigger').click(function () {
    scroll('600px', 500);
});