如何从其他页面跳转至首页(/)并滚动定位到指定区块

问题原因 #

该问题分两种常见场景对应不同诱因：

1. 本地file协议调试时，/#section-1会被解析为磁盘根目录下的资源，无法定位到你项目目录里的首页文件，自然锚点失效；
2. 线上部署时，若服务端配置了/路径301/302重定向到/index.html，部分旧版浏览器处理重定向时会丢失hash（#后的锚点内容），导致跳转后没有锚点信息，无法自动滚动。

解决方案 #

本地调试场景 #

• 不要直接用file协议打开HTML文件，使用本地服务启动项目：比如VS Code的Live Server插件，或执行python -m http.server 8000启动简易本地服务，通过http://localhost:8000访问站点，/#section-1即可正常生效。
• 也可以直接把链接写法换成相对路径./#section-1，不管是本地调试还是线上部署都能正确匹配当前目录下的首页资源，同时保留锚点信息。

线上部署场景 #

• 优先调整服务端配置，将/路径的请求改为内部直接映射到index.html资源，不要走3xx跳转，即可保留锚点信息。
• 不想修改服务端配置的话，可以加一段前端兜底JS代码，页面加载完成后主动匹配锚点执行滚动：

window.addEventListener('load', () => {
  const hash = window.location.hash
  if (hash) {
    const target = document.querySelector(hash)
    if (target) {
      // 需要平滑滚动就加behavior参数，不需要直接调用target.scrollIntoView()
      target.scrollIntoView({ behavior: 'smooth' })
    }
  }
})

如果你的首页是Vue/React等框架开发的动态页面，需要等DOM完全渲染完成后再执行上述滚动逻辑。

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