After the site loads it shows the contact section instead of the header [closed]

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;

Answer

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.