移动端滚动后锚点跳转失效问题排查求助

可能原因1：自定义滚动容器干扰原生锚点 #

如果网站使用了非window的滚动容器（比如某父级div设置了overflow-y: scroll/auto），原生锚点跳转（href="#id"）仅作用于window滚动，无法定位到自定义容器内的元素。

解决办法：

• 移除自定义滚动容器，改用window作为滚动主体；
• 或通过JS手动处理锚点跳转，示例代码：

// 给所有菜单锚点绑定点击事件
document.querySelectorAll('#myLinks a').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认锚点行为
    const targetId = this.getAttribute('href').slice(1);
    const targetElement = document.getElementById(targetId);
    const scrollContainer = document.querySelector('.your-scroll-container'); // 替换为你的滚动容器选择器
    // 滚动到目标元素
    scrollContainer.scrollTo({
      top: targetElement.offsetTop,
      behavior: 'smooth' // 可选，启用平滑滚动
    });
    // 隐藏菜单
    document.getElementById("myLinks").style.display = "none";
  });
});

可能原因2：菜单隐藏逻辑与锚点跳转冲突 #

点击锚点时，myFunctione会立即隐藏菜单，移动端浏览器的事件优先级可能导致锚点跳转被中断。

解决办法：
修改菜单切换函数，延迟隐藏菜单，确保锚点跳转先执行：

function myFunctione(event) {
  var x = document.getElementById("myLinks");
  // 若点击的是锚点链接
  if (event.target.tagName === 'A') {
    // 延迟隐藏菜单，给锚点跳转留执行时间
    setTimeout(() => {
      x.style.display = "none";
    }, 100);
  } else {
    // 切换菜单显示状态
    x.style.display = x.style.display === "block" ? "none" : "block";
  }
}

同时更新HTML中的onclick属性，传入事件对象：

<a href="#1s" onclick="myFunctione(event)" style="cursor:pointer">Home</a>
<!-- 其他锚点链接同理 -->

可能原因3：scroll-snap或fixed导航导致错位 #

若使用CSS滚动吸附（scroll-snap）或存在fixed定位导航栏，会引发锚点定位偏移、过度滚动错位问题。

解决办法：

1. 给章节添加滚动偏移，避免fixed导航遮挡内容：

.section {
  scroll-margin-top: 70px; /* 值等于导航栏的高度 */
}

2. 检查scroll-snap配置，确保吸附位置正确：

/* 滚动容器（如body） */
body {
  scroll-snap-type: y mandatory;
}
.section {
  scroll-snap-align: start; /* 确保吸附到元素顶部 */
  height: 100vh; /* 全屏章节需设置为视口高度 */
}

可能原因4：ID命名兼容性问题 #

虽HTML5允许ID以数字开头，但部分旧浏览器存在解析异常，建议将章节ID改为字母开头：

<!-- 修改前 -->
<div class="section" id="1s"></div>
<!-- 修改后 -->
<div class="section" id="section1"></div>

同步修改锚点链接的href属性：

<a href="#section1" onclick="myFunctione(event)">Home</a>

可能原因5：JS滚动监听干扰锚点定位 #

若页面存在自定义滚动监听（如滚动时做元素动画、改变元素位置），可能覆盖原生锚点的滚动行为。暂时注释代码中类似window.addEventListener('scroll', ...)的逻辑，测试是否恢复正常，再调整逻辑避免冲突。

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