HTML页内锚点跳转失效：点击仅追加#标识无滚动定位

原生HTML锚点完全支持定位到处于链接上方的页面元素，不存在跳转方向的限制。你遇到的“点击链接仅在URL末尾追加哈希值、不触发页面滚动，且把目标div移到链接下方后跳转就恢复正常”的现象，本质是CSS和布局规则打断了浏览器原生的锚点定位逻辑，常见触发原因如下：

• 滚动容器错位：如果给<html>或<body>标签设置了overflow: hidden、写死的固定高度，会导致浏览器默认的根滚动容器失效，实际页面滚动由内部某层自定义div承载。原生锚点的定位逻辑默认优先操作根滚动容器，找不到正确的滚动目标时就不会触发滚动；当目标元素刚好落在当前滚动容器的可视范围内时，浏览器的兜底计算偶尔会触发跳转，就形成了“移到链接下方就能正常跳”的错觉。
• 滚动吸附规则拦截：如果页面给滚动容器加了scroll-snap-type实现整屏滚动效果，吸附对齐阈值和锚点元素的位置不匹配时，会直接拦截原生锚点的滚动动作，最终只更新URL的哈希值，不执行实际滚动。
• 元素位置计算异常：如果目标锚点元素的实际渲染位置被负边距、固定顶栏遮挡，计算出来的滚动位置小于0（也就是目标已经在视口最顶端的上方），浏览器不会触发向上滚动，表现为点击指向页面上方的锚点完全没有反应。

可以按以下步骤快速定位修复：

1. 临时禁用全部自定义CSS测试，如果跳转恢复正常，逐行排查和滚动、溢出、吸附相关的规则
2. 检查<html>、<body>的overflow属性，确保这两个标签没有设置hidden类的非可见溢出值
3. 如果使用自定义滚动容器，不要完全依赖原生锚点逻辑，可以搭配简单的JS做位置计算兜底

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