Safari浏览器中锚点链接无法生效的问题求助

嘿，我之前也踩过Safari这个跨页面锚点的坑！结合你的情况，给你几个亲测有效的解决方案：

1. 等待页面完全加载后再触发锚点定位 #

Safari经常会在页面资源（比如图片、动态渲染内容）还没加载完成时就计算锚点位置，导致定位偏移或者直接失效。你可以在目标页面（resources.html和contact.html）添加一段JavaScript代码，确保页面完全加载后再定位到锚点：

window.addEventListener('load', function() {
  const targetHash = window.location.hash;
  if (targetHash) {
    const anchorElement = document.querySelector(targetHash);
    if (anchorElement) {
      // 使用scrollIntoView确保精准定位，behavior设为auto和浏览器默认行为一致
      anchorElement.scrollIntoView({ behavior: 'auto', block: 'start' });
    }
  }
});

2. 替换target="_top"为target="_self" #

如果你的页面没有嵌套在iframe中，_top和_self的效果理论上一致，但Safari对_top的处理偶尔会有异常。试试修改链接的target属性：

<li class="nav-item"> <a class="nav-link" href="resources.html#copy" target="_self">Resources</a> </li>
<li class="nav-item"> <a class="nav-link" href="contact.html#copy" target="_self">Contact</a> </li>

3. 检查锚点元素的CSS干扰 #

虽然你说.-white类只设置了文字颜色，但还是建议临时移除锚点元素的所有类，只保留id="copy"测试：

<h1 id="copy">.</h1>

有时候继承的CSS属性（比如position: fixed、transform、visibility）会干扰Safari的锚点定位逻辑，先排除这个可能性。

4. 强制触发哈希定位（极端情况） #

如果上面的方法都没用，可以试试在包含导航链接的页面添加一段代码，手动触发锚点定位：

// 在包含导航链接的页面添加
document.querySelectorAll('.nav-link[href*="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const targetUrl = this.href;
    // 先跳转到目标页面，再设置哈希
    window.location.href = targetUrl.split('#')[0];
    setTimeout(() => {
      window.location.hash = targetUrl.split('#')[1];
    }, 500);
  });
});

先从前两个方法开始试，大部分情况下都能解决问题！

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