Javascript scrollIntoView()浏览器兼容性：为何Chrome无法正常运行？

Chrome和Firefox对URL哈希的默认处理逻辑存在差异，这是导致你的脚本在Chrome中无法正常运行的核心原因：

具体原因 #

1. 处理时机冲突
   Chrome会在页面加载的早期阶段（远早于window.onload事件触发）就尝试定位哈希对应的ID元素。当找不到匹配元素时，它会自动将页面滚动到顶部。而你的脚本要等所有资源（比如示例里的图片）加载完成后，才会触发window.onload执行滚动操作——此时Chrome的默认滚动动作已经完成，直接覆盖了你的脚本行为。

2. 浏览器内置逻辑优先级更高
   就算你的脚本最终执行了滚动，Chrome自带的哈希处理逻辑优先级更高，会强制将滚动位置重置回顶部，导致你的滚动效果被抵消。

修复方案 #

调整脚本执行时机，并阻止Chrome的默认哈希处理行为，修改后的代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>SO URL Hash Shim Example</title>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            const bare_hash = window.location.hash?.substring(1);
            if (!bare_hash) return;

            function get_element_by_content(bare_hash_a, tag_a) {
                return Array.from(document.getElementsByTagName(tag_a)).find(e_a => e_a.innerText.includes(bare_hash_a));
            }
            const targetElement = get_element_by_content(bare_hash, "h1")?.parentNode;
            if (targetElement) {
                targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                // 移除URL中的哈希，避免浏览器重复触发默认处理
                history.replaceState(null, null, window.location.pathname + window.location.search);
            }
        });
    </script>
</head>
<body>
    <div>
        <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt='SO'>
        <h1>Bob</h1>
        <hr>
    </div>
    <div>
        <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt='SO'>
        <h1>Larry</h1>
        <hr>
    </div>
    <div>
        <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt='SO'>
        <h1>Steve</h1>
        <hr>
    </div>
</body>
</html>

修复说明 #

• 提前执行脚本：用DOMContentLoaded事件替代window.onload，DOM结构加载完成后立即执行滚动，抢在Chrome的默认处理之前完成操作。
• 清除哈希值：滚动完成后移除URL中的哈希，防止浏览器后续再次触发默认定位逻辑。
• 明确滚动配置：给scrollIntoView添加参数，保证不同浏览器的滚动行为一致。

内容的提问来源于stack exchange，提问作者CW Holeman II