如何通过URL锚点聚焦对应div且无需预先设置div焦点

嘿，这个场景我之前碰到过，刚好可以给你一套实用的解决方案！咱们一步步来：

核心问题拆解 #

首先，浏览器处理URL锚点时，会把空格自动编码成%20，所以当你访问example.com/#div 1时，实际传递的锚点是#div%201。另外，div默认是不可聚焦的，所以直接调用focus()没用，得先给它加个临时的可聚焦属性。

通用解决方案（支持多个div） #

你只需要在页面加载完成后，加入这段JavaScript逻辑，就能自动处理所有带锚点的情况：

document.addEventListener('DOMContentLoaded', function() {
  // 获取URL中的锚点部分（去掉开头的#）
  const anchor = window.location.hash.slice(1);
  if (!anchor) return; // 如果没有锚点，直接退出

  // 解码URL编码的空格（把%20转回空格），得到正确的div ID
  const targetId = decodeURIComponent(anchor);
  
  // 找到对应的div元素
  const targetDiv = document.getElementById(targetId);
  if (!targetDiv) return; // 如果元素不存在，容错处理

  // 给div添加临时的tabindex，让它可以被聚焦（-1表示不参与Tab导航）
  targetDiv.setAttribute('tabindex', '-1');
  
  // 先滚动到元素位置（可选，让页面定位更准确）
  targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
  
  // 执行聚焦操作
  targetDiv.focus();

  // 可选：聚焦后可以移除tabindex，保持DOM干净
  setTimeout(() => {
    targetDiv.removeAttribute('tabindex');
  }, 100);
});

关键细节说明 #

• 处理空格ID：用decodeURIComponent()把URL里的%20转回空格，确保能正确匹配到你的div 1、div 2这类带空格的ID。
• 临时tabindex：tabindex="-1"是最优选择，既满足JS聚焦的要求，又不会干扰用户的正常键盘导航（不会被Tab键选中）。
• 平滑滚动：scrollIntoView()的behavior: 'smooth'可以让页面滚动更自然，你也可以改成auto用默认的瞬间滚动。
• 容错处理：加入了锚点为空、元素不存在的判断，避免控制台报错。

多个div的适配 #

这个逻辑完全支持多个带空格ID的div，不管你有多少个，只要URL锚点和div的ID完全匹配（包括空格），就能自动定位并聚焦对应的元素。

比如：

• 访问example.com/#div 2 → 聚焦到<div id="div 2">
• 访问example.com/#div 1 → 聚焦到<div id="div 1">

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