JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" value="Scroll to Form" />
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<form id="scrollHere">Scroll to right here<br/>
There is all sorts of content below this<br/>
that is still part of the form</br>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
...
JavaScript
// This is a functions that scrolls to selector
jQuery.goToByScroll = function(selector){
// Scroll
$('html,body').animate({
scrollTop: $(selector).offset().top},
'slow');
};
$("input").click(function () {
$.goToByScroll("#scrollHere");
});