如何用JS实现URL包含指定锚点时自动跳转对应位置

以下代码兼容IE9+及所有现代桌面、移动端浏览器，无锚点访问时不会执行任何额外逻辑，不影响页面正常加载：

if (window.location.hash === '#showcase') {
  let hasScrolled = false
  // 锚点跳转逻辑封装
  function scrollToTarget() {
    // 避免重复执行
    if (hasScrolled) return
    const targetEl = document.getElementById('showcase')
    if (targetEl) {
      targetEl.scrollIntoView({
        behavior: 'auto', // 如需滚动动画可改为'smooth'，IE不支持smooth动画会自动降级为直接跳转
        block: 'start'
      })
      hasScrolled = true
    }
  }

  // DOM加载完成后执行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', scrollToTarget)
  } else {
    // 若脚本执行时DOM已加载完成，直接触发跳转
    scrollToTarget()
  }
  // 兜底逻辑：页面所有资源加载完成后再次校验，避免元素渲染延迟导致跳转失效
  window.addEventListener('load', scrollToTarget)
}

逻辑说明 #

• 仅当URL哈希严格等于#showcase时才会执行跳转逻辑，其余锚点、无锚点场景不受影响
• 同时监听DOMContentLoaded和load两个事件，覆盖DOM渲染完成、资源加载完成两个节点，避免元素未渲染、高度未计算完成导致的跳转失效
• 加了执行锁防止重复触发滚动，无额外性能损耗

特殊场景适配：如果#showcase元素是动态生成的（比如接口请求后才渲染到页面），请在动态渲染的回调函数中手动调用一次scrollToTarget()即可。

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