I made it with react and anytime I reload the site it shows the contact section instead of the header first even after deploying it: here is the link to the website
const Form = ({ emailSent, setEmailSent }) => {
return (
<Box component="form" ref={form} onSubmit={sendEmail} validate>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
autoComplete="given-name"
name="user_name"
required
fullWidth
id="name"
label="Name"
autofocus
/>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
id="email"
label="Email Address"
name="user_email"
autoComplete="email"
/>
</Grid>
</Grid>
<Button
type="submit"
variant="outlined"
sx={{ mt: 3, mb: 2, border: "1px solid #9F9F9F", color: "#9F9F9F" }}
>
send
</Button>
</Box>
);
};
export default Form;Please provide appropriate code snippet. Not an direct link for others to debug. It's hard for others too.
Your issue is this line of code
in Form.js
<Grid item xs={12}>
<TextField
autoComplete="given-name"
name="user_name"
required
fullWidth
id="name"
label="Name"
autoFocus // this is making it scroll to the input box
/>
autoFocus will bring the focus on that input automatically when page is loaded that's the reason your page is scrolled to contact section.