JSFiddle - React, Tailwind, and code Playground

by IagoSRL

HTML

<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
<div><button id="bb">B</button><button id="bc">C</button><button id="bd">D</button></div>
<p>space</p>
<div id="r1">
    <div id="a" style="background: #002233"><p>je</p>
    <div id="b" style="height: 200px; background: green">B</div>
    <div id="c" style="height: 200px; background: blue">C</div>
    <div id="d" style="height: 200px; background: red">D</div>
    </div></div>

CSS

#a {
    
}
#b, #c, #d {
    border: 2px solid black;
    box-sizing: border-box;
}
#r1 {
    overflow: auto;
    height: 200px;
    border: 1px solid green;
    margin-top: 50px;
    padding-top: 50px;
}

JavaScript

var scrollTo = function scrollTo(el, offset) {
    
    var pos = el.offset();
    offset = offset || pos;
    
    var cont = el.parent();
    var isRoot = cont.get(0) === document.documentElement;
    
    var ctx = el.offsetParent(),
        contPos = ctx.get(0) === cont.get(0) ? { top: 0, left: 0 } : cont.position();

    //console.log('scrollTo position', pos, cont.scrollTop(), el);
    var scroll = {
        top: cont.scrollTop()  + offset.top,
        left: cont.scrollLeft()  + offset.left
    };
    cont.scrollTop(scroll.top);
    cont.scrollLeft(scroll.left);
    if (!isRoot) {
        // Continue until reach the root
        return scrollTo(cont, offset);
    }
    
    // Return if root was reached (so no more scrolling is need)
    return isRoot;
};
function a(el) {
    var parent = el.parent();

    while(parent.get(0)) {
        parent.scrollTo(el);
        parent = parent.parent();
    }
}

$(function() {
    $('#bb').click(function() {
        scrollTo($('#b'));
    });
    $('#bc').click(function() {
        //scrollTo($('#c'));
       //$('#r1').scrollTo($('#c'));
        a($('#c'));
    });
    $('#bd').click(function() {
        scrollTo($('#d'));
    });
});