JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<a id="the_link" href="#the_input">Scroll to input</a>
<p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p>
<input id="the_input" type="text"></input>
<p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p><p>force scroll</p>

JavaScript

$('#the_link').bind('click', function (e){
    //setTimeout can pass arguments to the called function
    setTimeout(focus, 30, '#the_input'); 
});

// save as distinct function so we can avoid all those anonymous functions
function focus( selector ){
    $(selector).focus();
}