onChange触发表单提交时如何携带锚点实现提交后页面定位

完全可以实现，不需要调整现有下拉菜单自动提交的核心逻辑，仅需少量前端代码改动即可解决提交后页面回顶的问题。

问题原因 #

你当前使用的onChange="document.form2.submit()"是触发表单整页提交，默认提交跳转后的URL不带锚点参数，浏览器会默认回到页面顶部，才会出现操作靠后的下拉菜单后需要反复滚动的问题。

实现方案 #

方案1：提交时拼接URL锚点（优先推荐） #

这个方案不需要修改任何后端逻辑，锚点由浏览器本地解析，兼容性最好，实施成本最低：

1. 给页面上每个下拉菜单设置唯一ID，按序号命名即可，比如第N个下拉菜单设为id="select_N"
2. 把原来行内写死的提交事件替换为带锚点拼接的逻辑：

<!-- 每个下拉菜单的onChange改成传当前元素对象 -->
<select id="select_1" name="xxx" onChange="submitFormWithAnchor(this)">
<!-- 第2个就id="select_2"，以此类推覆盖全部40个下拉菜单 -->
</select>

function submitFormWithAnchor(currentSelect) {
  const form = document.form2;
  // 清除原action上可能存在的旧锚点，避免拼接异常
  const baseActionUrl = form.action.split('#')[0];
  // 把当前操作的下拉菜单ID作为锚点拼到提交地址末尾
  form.action = `${baseActionUrl}#${currentSelect.id}`;
  form.submit();
}

表单提交完成页面重载后，浏览器会自动识别URL末尾的锚点，直接滚动到ID匹配的下拉菜单位置，不会再回到顶部。

方案2：本地存储标记+页面加载滚动（兜底方案） #

如果你的表单提交地址是动态生成、存在其他逻辑改写form的action属性，可以用这个方案，稳定性更高：

1. 同样给每个下拉菜单设置唯一ID，onChange事件传入当前元素对象
2. 提交前把当前操作的菜单ID存入sessionStorage，页面加载完成后读取ID自动滚动到对应位置：

function submitFormWithAnchor(currentSelect) {
  // 存当前操作的菜单ID，sessionStorage在页面提交跳转后不会丢失
  sessionStorage.setItem('last_operate_select', currentSelect.id);
  document.form2.submit();
}

// 页面加载完成后执行定位
window.addEventListener('load', () => {
  const lastSelectId = sessionStorage.getItem('last_operate_select');
  if (!lastSelectId) return;
  const targetSelect = document.getElementById(lastSelectId);
  if (targetSelect) {
    // 滚动到对应位置，预留10px顶部边距避免元素贴顶
    window.scrollTo({
      top: targetSelect.offsetTop - 10,
      behavior: 'instant'
    });
  }
  // 清除存储的标记，避免其他入口进入页面时误触发滚动
  sessionStorage.removeItem('last_operate_select');
})

注意事项 #

• 所有下拉菜单的ID必须全局唯一，否则锚点定位会匹配到第一个同ID元素，出现位置偏移
• 如果用方案1，不需要额外处理锚点对后端的影响：URL中#后的内容不会被发送到服务端，完全不影响原有表单参数的提交逻辑

内容的提问来源于stack exchange，提问作者John Dohh