JSFiddle - React, Tailwind, and code Playground

by Gloak

HTML

<div id="toop" tabindex="-1">
<input id="inputs">
</div>

CSS

body {height:3000px}
#inputs, input {position:absolute;top:300px;width:300px;height:80px; background:red}
div {position:fixed;bottom:0;left:0;right:0;height:50%;background:gray;display:none;}

JavaScript

var $htmlOrBody = $('html, body'), // scrollTop works on <body> for some browsers, <html> for others
    scrollTopPadding = 8;

$('#inputs').focus(function() {
    // get textarea's offset top position
    var divTop = $(this).offset().top;
    // scroll to the textarea
    $htmlOrBody.scrollTop(divTop - scrollTopPadding);
});