JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<div class="mini" id="mini">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<a id="lnkToTop" href="javascript:;">Наверх</a>
</div>
</div>
CSS
.wrap {
margin: 0 auto;
width: 400px;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 50px;
}
.mini {
width: 100%;
height: 300px;
border: 1px solid #333333;
background: #eee;
overflow: auto;
}
JavaScript
function scrollTo(element, to, duration) {
if(typeof element == 'String')
element = document.getElementById(element);
if (duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
scrollTo(element, to, duration - 10);
}, 10);
}
var lnk = document.getElementById('lnkToTop');
var mini = document.getElementById('mini');
lnk.onclick = function() {
scrollTo(mini, 0, 300)
}