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
JavaScript
x
39
39
1
const Form = ({ emailSent, setEmailSent }) => {
2
3
return (
4
<Box component="form" ref={form} onSubmit={sendEmail} validate>
5
<Grid container spacing={2}>
6
<Grid item xs={12}>
7
<TextField
8
autoComplete="given-name"
9
name="user_name"
10
required
11
fullWidth
12
id="name"
13
label="Name"
14
autofocus
15
/>
16
</Grid>
17
<Grid item xs={12}>
18
<TextField
19
required
20
fullWidth
21
id="email"
22
label="Email Address"
23
name="user_email"
24
autoComplete="email"
25
/>
26
</Grid>
27
</Grid>
28
<Button
29
type="submit"
30
variant="outlined"
31
sx={{ mt: 3, mb: 2, border: "1px solid #9F9F9F", color: "#9F9F9F" }}
32
>
33
send
34
</Button>
35
</Box>
36
);
37
};
38
39
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
JavaScript
1
11
11
1
<Grid item xs={12}>
2
<TextField
3
autoComplete="given-name"
4
name="user_name"
5
required
6
fullWidth
7
id="name"
8
label="Name"
9
autoFocus // this is making it scroll to the input box
10
/>
11
autoFocus
will bring the focus on that input automatically when page is loaded that’s the reason your page is scrolled to contact section.