JSFiddle - React, Tailwind, and code Playground

by Gloak

HTML

<div id="index-bar">
<form>
<input type="text" id="toop">
</form>

</div>

CSS

body {height:3000px}
input{position:absolute;top:300px;width:300px;height:80px;background:red}

JavaScript

var $htmlOrBody = $('html, body'), // scrolling happens on body for some browsers, html for others
 
    scrollTopPadding = 8,
    scrollTopLast = 0;
$('input').focus(); {
    // save the current scroll position for blur event
    scrollTopLast = $(window).scrollTop();
    // scroll to the textarea
    $htmlOrBody.scrollTop($(this).offset().top - scrollTopPadding);
    // show fake keyboard

}).blur(function() {
    // scroll back to position before textarea focus
    $htmlOrBody.scrollTop(scrollTopLast);
    // hide fake keyboard
});