JSFiddle - React, Tailwind, and code Playground

by lucasprus

HTML

<button>Set div's vertical scrollbar position to 100px</button>
<button>Scroll to span</button>
<div>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<br>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat velit sit amet mauris scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu massa id arcu volutpat egestas. Praesent vitae diam sed diam ullamcorper laoreet. Praesent dictum erat ante, eu molestie diam rutrum sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat velit sit amet mauris scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu massa id arcu volutpat egestas. Praesent vitae diam sed diam ullamcorper laoreet. Praesent dictum erat ante, eu molestie diam rutrum sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat velit sit amet mauris scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu massa id arcu volutpat egestas. Praesent vitae diam sed diam ullamcorper laoreet. Praesent dictum erat ante, eu molestie diam rutrum sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat velit sit amet mauris scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu massa id arcu volutpat egestas. Praesent vitae diam sed diam ullamcorper laoreet. Praesent dictum erat...

CSS

span {
    color:plum;
}
div {
    border:1px solid black;
    width:100px;
    height:150px;
    overflow:auto
}

JavaScript

(function ($) {
    var spanTagTopOffset = $('span').offset().top;

    $(function () {
        $("button:first").click(function () {
            $("div").animate({
                scrollTop: 100
            }, 'slow');
        });
        $("button:last").click(function () {
            $("body").animate({
                scrollTop: spanTagTopOffset
            }, 'slow');
        });
    });

})(jQuery);