如何实现点击链接滚动到formcontainer顶部并聚焦表单首个输入框

原有实现出现浏览器滚动位置不一致的原因是输入框focus方法自带的默认滚动行为会覆盖手动设置的滚动位置，调整执行逻辑即可同时满足「formcontainer固定在窗口顶部」和「首个输入框聚焦」两个需求：

现代浏览器实现代码 #

function scrollForm() {
  // 1. 强制将id为formcontainer的元素滚动到视口顶部
  const formContainer = document.getElementById('formcontainer');
  formContainer.scrollIntoView({
    behavior: 'auto',
    block: 'start',
    inline: 'start'
  });
  // 2. 聚焦首个输入框，禁用默认滚动避免偏移
  document.getElementById('input_1_1').focus({
    preventScroll: true
  });
}

如果需要点击后平滑滚动到表单位置，将behavior参数值修改为'smooth'即可。

兼容旧浏览器实现代码 #

如果需要兼容不支持preventScroll属性的旧版浏览器，可以调整执行顺序，先聚焦输入框再滚动formcontainer：

function scrollForm() {
  document.getElementById('input_1_1').focus();
  document.getElementById('formcontainer').scrollIntoView({block: 'start'});
}

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