Shopify搭配PageFly时菜单锚链接在Safari端失效怎么办

问题根因 #

该故障是PageFly前端交互逻辑与WebKit内核（Safari/iOS自带浏览器内核）的锚点跳转机制冲突导致：

• 页面初始加载阶段，DOM还未被PageFly的交互脚本完全接管，原生锚点跳转逻辑可以正常触发，所以首次点击能生效
• 页面完全加载后，PageFly自带的平滑滚动、懒加载区块高度重算、菜单点击拦截逻辑会覆盖原生锚点跳转行为，而WebKit内核对hashchange事件的触发优先级低于Chromium内核（Chrome/Edge），直接导致锚点点击无响应
• 你之前尝试的三种写法中，域名后加空格拼接锚点的格式本身是错误语法，带完整域名的同页锚点写法会触发不必要的页面重载，反而会提升失效概率。

解决方案（按操作难度从低到高排序，无开发基础也可操作） #

方案1：PageFly后台配置修复（优先尝试，零代码） #

• 进入Shopify后台打开PageFly应用，找到全局设置入口
• 找到「Smooth Scroll（平滑滚动）」选项，直接关闭该功能后保存全局配置
• 找到「Lazy Load（懒加载）」配置，将所有锚链接对应的目标区块的懒加载开关单独关闭（不需要全局关闭懒加载，避免影响页面加载速度）
• 回到Shopify后台的在线商店-菜单配置页，将所有锚链接统一修改为仅带#的纯锚点格式，例如#product-section、#faq-block，锚点名称不要使用中文、特殊符号、大写字母，不要拼接域名、不要加空格
• 清空Shopify缓存、PageFly缓存，用Safari无痕模式测试，绝大多数场景下该方案即可解决问题。

方案2：轻量代码兼容（方案1无效时使用，仅需复制粘贴） #

• 进入Shopify后台-在线商店-主题，点击操作按钮选择编辑代码
• 找到Layout文件夹下的theme.liquid文件，拉到文件最底部，在</body>标签之前粘贴以下代码：

<script>
// 兼容Safari/iOS下PageFly同页锚点跳转
document.addEventListener('click', function(e) {
  const linkNode = e.target.closest('a');
  if (!linkNode) return;
  const anchorHash = linkNode.hash;
  if (anchorHash && anchorHash.startsWith('#') && anchorHash.length > 1 && linkNode.pathname === window.location.pathname) {
    e.stopImmediatePropagation();
    e.preventDefault();
    const targetSection = document.querySelector(anchorHash);
    if (targetSection) {
      setTimeout(() => {
        targetSection.scrollIntoView({behavior: 'smooth', block: 'start'});
        history.pushState(null, '', anchorHash);
      }, 100);
    }
  }
}, true);
</script>

• 保存文件后清空所有缓存测试即可。这段代码会在事件捕获阶段优先拦截同页锚点点击，绕开PageFly的事件拦截逻辑，100ms的延迟是为了等待懒加载区块完成高度计算，避免跳转位置偏移。

方案3：吸顶栏场景兜底调整 #

如果站点配置了固定吸顶的导航栏/公告栏，跳转后锚点标题会被吸顶栏遮挡，可以把上述代码中setTimeout内的代码替换为以下内容，数值改成自己站点吸顶栏的实际高度即可：

const headerOffset = 80; // 替换为站点吸顶栏的实际像素高度
const targetPosition = targetSection.getBoundingClientRect().top + window.pageYOffset - headerOffset;
window.scrollTo({top: targetPosition, behavior: 'smooth'});
history.pushState(null, '', anchorHash);

• 额外检查：所有锚点对应的目标区块ID必须设置在PageFly区块的最外层元素上，不要设置在区块内部的嵌套元素上，否则会出现找不到目标元素的问题。

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