Scroll to top in div

by Sophie

HTML

<div id="wrapper">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus lectus ut orci mattis finibus. Nulla vitae tellus leo. Aliquam gravida libero magna, sed consequat tellus condimentum vel. In lacinia, turpis interdum pulvinar tincidunt, nunc neque convallis dolor, a fringilla magna justo ac diam. Integer condimentum tempus massa nec molestie. Fusce quis rutrum magna. Nam cursus egestas est nec sagittis. Morbi volutpat dapibus lorem, eget suscipit lacus commodo quis. Aenean et quam ac dolor interdum bibendum. In luctus enim non justo condimentum tempor. Quisque porttitor scelerisque dictum. Nulla sed lacus ac justo fermentum vehicula. Curabitur mollis ornare leo in dictum. Morbi vitae enim vel nibh euismod aliquam. Proin at mauris at eros tempor lacinia eu sit amet leo. Maecenas gravida, libero sed imperdiet iaculis, leo felis commodo orci, quis ullamcorper risus velit malesuada velit.

Ut pretium semper lacus, non pulvinar libero finibus vitae. Sed tempus nibh tortor, ut sollicitudin nulla auctor interdum. Nulla commodo nunc et massa pulvinar, at condimentum odio pharetra. Phasellus commodo molestie libero ac tincidunt. Aliquam erat volutpat. Aenean aliquet nunc et est posuere viverra sed at mi. Sed in ante nec eros volutpat egestas non quis tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Aliquam vel dignissim velit, a rutrum massa. Pellentesque pulvinar nisl at nunc hendrerit, et fermentum ipsum ullamcorper. Sed eget mauris eget ligula rutrum varius. Donec lobortis tellus odio, in sollicitudin sem ornare sit amet. Etiam a gravida est.

Ut ut orci ut dolor ullamcorper vulputate. Aenean pellentesque eros a tortor fringilla efficitur. Vestibulum lobortis mattis malesuada. Proin posuere, odio et maximus semper, arcu nibh cursus nulla, eu iaculis risus elit sit amet mauris. Vivamus venenatis convallis lectus ut vestibulum. Sed efficitur varius arcu at rhoncus. Morbi...

CSS

#wrapper {
background: black;
color: white;
height: 500px;
overflow: scroll;
width: 300px;
padding: 20px;
}

JavaScript

window.setTimeout(()=>{
var button = document.querySelector("#button");
var wrapper = document.querySelector("#wrapper");
button.addEventListener("click", ()=>{scrollTo(wrapper,0,100)});
},1000)

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}