I am using window.scrollTo to scroll down on my page after i click submit. if an use a ref element on a div to show where the page should scroll down to.
My problem is that when i submit the element that the page is suposed to scroll down to in first visible at the same time, which means that is it not scrolling alle the way down.
the setSchema variable is the one that makes the "schema" visable and that is what is want to scroll down to. here is my method in the submit form.
function submitForm(event) {
event.preventDefault();
console.log(value);
setSchema(value);
window.scrollTo({
top: resultSection.current.offsetTop,
behavior: "smooth",
});
}and this is were i have the form and when submitted and Schema is "true" is will display the result in json.
<form onSubmit={submitForm} class="type1">
<input type="text" name="name">name</input>
<input type="text" name="aeg">age</input>
<button id="submit" type="submit">
Generate schema
</button>
</form>
{schema && (
<div>
<h3>Result</h3>
Copy json and attach when sending request to platform team
<pre>
{/* button for copying */}
<button
id="copy"
onClick={() =>
navigator.clipboard.writeText(
JSON.stringify(schema, null, 2)
)
}
>
Copy
</button>
{/* display prettifying json-result */}
<div ref={resultSection}>
<PrettyPrint jsonObj={schema} />
</div>
</pre>
</div>
)}
</div>
)}so how do i make sure the submitform function scroll down to where I have the schema? hope i make sense, thank you