JSFiddle - React, Tailwind, and code Playground

by Gloak

HTML

<div id="top" tabindex="1">
<span><input id="location" placeholder="location">
<select>
<option>1</option>
<option>2</option>
</select></span>

</div>

CSS

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

JavaScript

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

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