data-属性不能作为页面锚点，浏览器仅通过id属性匹配href中的hash值实现原生跳转；若需用data-标识锚点，必须用JavaScript手动拦截跳转并调用scrollIntoView。
data- 属性不能标记页面锚点位置。浏览器只认 id 属性作为锚点目标，data- 是自定义元数据容器，不参与 DOM 锚点匹配机制。
为什么 data-id 或 data-anchor 无法触发锚点跳转
浏览器解析 href="#section1" 时，只会调用 document.getElementById("section1") 查找目标元素。它完全忽略 data- 属性——无论你写 data-id="section1" 还是 data-anchor="true"，都不会被匹配。
- 这是 HTML 规范行为，不是浏览器 bug，所有主流引擎（Blink、Gecko、WebKit）一致
-
name属性在 HTML5 中已废弃，data-属性设计初衷就是“不参与任何语义或行为”，只供 JS/CSS 读取 - 开发者工具里执行
document.querySelector('[data-id="section1"]')能拿到元素，但浏览器原生跳转逻辑根本不会执行这行代码
想用 data-* 辅助锚点，只能配合 JavaScript
如果你坚持用 data- 存储锚点标识（比如统一管理、避免污染 id），必须手动接管跳转逻辑：
- 链接保留
href="#section1"（维持 URL 可分享、可后退），但加preventDefault() - 从
href提取section1，再用document.querySelector('[data-anchor-id="section1"]')查找目标 - 调用
.scrollIntoView()，并设置scroll-margin-top避开固定导航栏 - 首次加载带 hash 时，需额外检查
location.hash并手动触发一次
示例关键片段：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
const hash = a.getAttribute('href').slice(1);
const target = document.querySelector(`[data-anchor-id="${hash}"]`);
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});真正该用 id 的地方，别绕弯子
只要目标是「让浏览器原生滚动到某元素」，id 就是唯一正确且零成本的方案：
-
id值合法即可：字母开头，只含字母、数字、-、_（如id="faq-section"） - 不用怕命名冲突——
id本就要求全局唯一，这反而是约束带来的确定性 - SEO 和可访问性（如屏幕阅读器）都依赖
id，data-对它们完全不可见 - 服务端渲染（SSR）或静态站点中，
id锚点无需 JS 即可工作，data-方案必然降级失效
最容易被忽略的一点：很多人试图用 data- 规避 id 命名限制（比如想用中文或空格），但结果是跳转彻底失效——不如直接按规范写 id，或者用短横线分隔的英文词组。
