JSFiddle - React, Tailwind, and code Playground

scrolling with vanilla-js

by Trina Lu

HTML

<p>
    superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext
    <br> superlongtext

</p>
<button id="top">Top</button>

JavaScript

var btn = document.querySelector('#top');

function scrollto(_ele, _duration, _to) {
    _to = _to || 0;
    var start = _ele.scrollTop;
    var tick = (start - _to) / _duration * 10;
    _duration -= 10;
    _ele.scrollTop -= tick;
    if (start == _to) {
        return false;
    }
    setTimeout(function() {
        scrollto(_ele, _duration, _to);
    }, 10);
}
btn.onclick = function(e) {
    scrollto(document.body, 100);
}