React站点刷新后默认显示联系板块而非页头问题求助

页面刷新后自动跳转至联系板块，是联系表单内Name输入框配置的autofocus属性导致的。
浏览器默认行为逻辑是：页面加载完成后，会自动滚动到当前设置了自动聚焦的表单元素位置，你的联系表单处在页面中下区域，因此每次刷新都会直接定位到该板块，该表现和部署环境无关，所以本地、线上会复现完全一致的问题。

直接移除Name输入框上的autofocus属性即可解决问题，修改后的表单代码参考：

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"
          />
        </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;

如果需要确保所有场景下页面加载都默认展示顶部区域，可以在应用根组件挂载时增加强制回到顶部的逻辑，避免其他潜在的滚动错位问题：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 页面首次加载时强制滚动到页面顶部坐标
    window.scrollTo({ top: 0, left: 0 });
  }, []);

  // 保留原有路由、页面布局等代码
}

注意：MUI TextField 组件的自动聚焦属性为驼峰写法autoFocus，你代码中写的小写autofocus最终会被渲染为原生HTML的autofocus属性，效果一致，都会触发自动聚焦+滚动的逻辑。这类属性仅适合放在首屏可见的输入控件上，放在页面中下部的表单中必然会引发加载时的滚动错位。

内容的提问来源于stack exchange，提问作者daniel asakpa