基于HTML+Bootstrap开发的站点打开时默认定位在页中/页脚而非顶部如何解决

问题描述 #

我知道这个现象非常怪异，但我输入网址打开我的站点时，页面默认不会定位在页眉位置，而是直接展示页脚或者页面中间区域。我需要手动向上滚动才能看到顶部的起始菜单。该站点完全使用HTML搭配Bootstrap进行开发。

解决方案 #

• 表单自动聚焦属性导致
  浏览器会默认滚动到设置了autofocus属性的输入框、下拉框等表单元素位置，是该问题的高频触发原因。
  解决方法：检查所有<input>、<textarea>、<select>标签，删除autofocus属性。如果业务需要保留自动聚焦能力，可在页面加载完成后先强制回顶再执行聚焦逻辑，示例代码如下：

window.addEventListener('load', () => {
  window.scrollTo(0, 0)
  document.querySelector('#目标输入框ID').focus()
})

• URL锚点哈希触发跳转
  如果访问的URL末尾带有#xxx格式的锚点标识，浏览器会自动定位到页面对应ID的元素位置。
  解决方法：不需要锚点跳转的场景，可在页面初始化时清除默认锚点行为，示例代码如下：

if (window.location.hash) {
  setTimeout(() => window.scrollTo(0, 0), 0)
}

• 资源加载导致布局偏移
  页面内图片、异步加载的模块没有预设宽高，加载完成后撑开页面高度，会把视觉视口往下挤，最终停在非顶部位置。
  解决方法：给所有<img>标签设置固定宽高属性，配合Bootstrap的img-fluid类实现响应式的同时避免布局偏移；异步加载的模块提前设置占位容器的固定高度。
• 第三方脚本触发滚动
  引入的弹窗、统计、动画等第三方组件，可能在初始化时主动执行了滚动逻辑。
  解决方法：在所有脚本执行完成后添加最终回顶逻辑，用延时确保不会被其他逻辑覆盖：

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => window.scrollTo(0, 0), 100)
})

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