如何实现页面重载时指定ID元素居中显示而非定位到顶部？

直接给你调整后的可行脚本，解决你遇到的问题：

window.onload = function() {
    // 获取URL中的哈希值（即指定的目标ID）
    const targetId = window.location.hash.slice(1);
    if (!targetId) return; // 没有指定ID就直接退出

    const targetElement = document.getElementById(targetId);
    if (!targetElement) return; // 找不到对应元素时退出

    // 计算滚动位置：元素顶部的全局坐标 - 屏幕高度的一半，实现居中
    const elementTop = targetElement.getBoundingClientRect().top + window.pageYOffset;
    const scrollPosition = elementTop - (window.innerHeight / 2);
    
    // 执行滚动，可选平滑效果
    window.scrollTo({
        top: scrollPosition,
        behavior: 'smooth' // 不需要平滑的话可以删掉这一行
    });

    // 移除URL中的哈希，避免刷新后重复触发
    if (window.history.replaceState) {
        window.history.replaceState(null, null, window.location.pathname + window.location.search);
    }

    // 后续高亮效果：给元素添加自定义类，配合CSS实现
    targetElement.classList.add('highlight-target');
};

再补充高亮效果的CSS代码：

.highlight-target {
    animation: highlight-fade 2s ease-in-out;
    background-color: rgba(255, 215, 0, 0.3);
}

@keyframes highlight-fade {
    0% { background-color: rgba(255, 215, 0, 0.7); }
    100% { background-color: rgba(255, 215, 0, 0); }
}

关键调整说明 #

• 你原来的window.onload = window.scrollTo(...)写法错误，window.onload需要赋值一个函数，而非直接执行scrollTo
• 用getBoundingClientRect()结合window.pageYOffset计算元素的全局坐标，不受页面布局干扰，比隐形锚点更可靠
• 加入了ID和元素的存在性判断，避免找不到目标时出现报错
• 平滑滚动效果可选，按需保留或删除

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