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;
Advertisement
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.