通过JavaScript启用:target元素状态，解决Chrome下样式不生效问题

针对Chrome中重复设置相同hash无法触发:target状态更新的问题，可通过以下几种方案解决：

方案1：先清空hash再重置（保留滚动位置） #

Chrome对重复设置相同hash的行为不会触发target状态更新，因此可以先清空hash再恢复原值，同时保留滚动位置：

let element = document.getElementById(location.hash.substring(1));
if (element) {
    const scrollY = window.scrollY;
    const originalHash = location.hash;
    
    // 先清空hash触发状态重置
    location.hash = '';
    // 延迟恢复原hash，确保Chrome识别为新的hash变化
    setTimeout(() => {
        location.hash = originalHash;
        // 恢复之前的滚动位置
        window.scrollTo({ top: scrollY });
        // 平滑滚动到目标元素中央
        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }, 0);
}

setTimeout用于让浏览器完成hash清空的状态更新后再重置hash，确保Chrome能检测到变化并触发:target样式。

方案2：使用History API修改hash（无闪烁） #

利用history.replaceState修改hash，无需清空hash即可触发target状态，且不会产生页面闪烁或滚动跳动：

let element = document.getElementById(location.hash.substring(1));
if (element) {
    const scrollY = window.scrollY;
    const originalHash = location.hash;
    
    // 通过replaceState修改hash，Chrome会正确触发:target状态
    history.replaceState(null, '', originalHash);
    // 恢复滚动位置
    window.scrollTo({ top: scrollY });
    // 平滑滚动到目标元素
    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

这种方式更优雅，直接通过History API修改hash状态，避免了hash清空的过渡过程。

方案3：手动模拟:target状态（兼容性最强） #

如果浏览器hash处理逻辑存在差异，可直接通过CSS类模拟:target样式，完全避开浏览器兼容性问题：

/* 自定义类模拟:target样式 */
.target-highlight {
    border: 2px solid #ff4444;
    background-color: #fff3f3;
}

/* 保留原:target样式，兼容正常静态元素场景 */
:target {
    border: 2px solid #ff4444;
    background-color: #fff3f3;
}

在JavaScript中直接给目标元素添加高亮类：

let element = document.getElementById(location.hash.substring(1));
if (element) {
    // 移除其他元素的高亮类（可选）
    document.querySelectorAll('.target-highlight').forEach(el => el.classList.remove('target-highlight'));
    // 给当前目标元素添加高亮类
    element.classList.add('target-highlight');
    // 平滑滚动到目标元素中央
    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

此方式完全不受浏览器hash处理逻辑影响，兼容性覆盖所有场景。

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