移动端天气APP加载后自动滚动到底部问题求助

排查自动聚焦元素 #

• 检查动态渲染的DOM内容里，是否存在带autofocus属性的输入框或可聚焦元素——浏览器会自动滚动到聚焦元素的位置。如果有这类元素，直接移除autofocus属性；或者在DOM渲染完成后手动取消聚焦：

  const focusedEl = document.activeElement;
  if (focusedEl && focusedEl.blur) focusedEl.blur();
  

直接在数据渲染完成后执行滚动 #

• 不要依赖window.onload（它会等待所有资源加载完成，时机偏晚），在你获取到API数据、完成页面DOM渲染的代码块末尾，直接调用滚动方法：

  // 放在数据处理并渲染到DOM的代码之后
  window.scrollTo({ top: 0, behavior: 'instant' });
  

  使用behavior: 'instant'确保滚动立即生效，避免动画延迟导致的异常。

禁用浏览器自动滚动恢复 #

• 部分浏览器会记住用户之前的滚动位置并自动恢复，可通过元标签或JS禁用该行为：
  • 页面头部添加元标签：

    <meta name="scroll-restoration" content="manual">
    

  • 或者用JS设置：

    if ('scrollRestoration' in history) {
      history.scrollRestoration = 'manual';
    }
    

修复你现有代码的问题 #

• 你之前的代码存在语法错误（缺少闭合括号），且setTimeout的延迟不稳定，修改为更可靠的写法：

  window.addEventListener('load', () => {
    window.scrollTo(0, 0);
  });
  

  如果是单页应用，建议在数据加载完成的回调或路由钩子中直接执行滚动，无需依赖window.onload。

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