锚点链接通过 href="#id" 跳转至对应 id 元素，需确保 id 唯一、合法且目标可见；固定头部时应设 scroll-margin-top 避免遮挡，避免使用 margin/padding 模拟；注意动态内容渲染时机及浏览器兼容性。
用锚点链接跳转到页面内指定位置
直接在 index.html 里写带 # 的链接就能跳转，前提是目标位置有对应 id。浏览器原生支持，不需要 JS。
- 链接写法：
<a href="#section2">跳转到第二节</a> - 目标位置写法：
<h2 id="section2">第二节内容</h2>（id值必须和href中的#后部分完全一致，区分大小写） - 目标元素不一定要是标题，
<div id="top"></div>、<p id="contact"></p>都可以 - 如果
id包含空格或特殊字符（如my section），浏览器可能无法识别，应改用连字符（my-section）或驼峰（mySection）
点击后页面滚动不精准？检查 CSS 的 scroll-margin
现代浏览器默认把目标元素顶部对齐视口顶部，但如果有固定头部（position: fixed），内容会被遮挡。这是最常被忽略的体验问题。
- 给目标元素加
scroll-margin-top：例如h2[id] { scroll-margin-top: 80px; }，让滚动停靠时预留 80px 上边距 - 不推荐用
margin-top: -80px+padding-top: 80px模拟，会导致布局偏移和可访问性问题 - 旧版 Safari（scroll-margin，可降级用
scroll-padding-top在html或body上设置全局偏移
想用 JS 控制滚动行为（比如平滑、回调）
原生锚点跳转是瞬间滚动，若需平滑效果或跳转后执行逻辑，得用 Element.scrollIntoView() 或 window.scrollTo()。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 基础平滑滚动：
document.getElementById("section3").scrollIntoView({ behavior: "smooth" }); - 带偏移的精确控制（避开 fixed header）：
window.scrollTo({ top: element.offsetTop - 80, behavior: "smooth" }); - 监听跳转完成：锚点跳转本身无事件，但可以用
hashchange监听 URL 变化：window.addEventListener("hashchange", () => { /* 处理逻辑 */ }); - 注意：直接调用
scrollIntoView前要确保元素已渲染，动态生成的内容需等 DOM 更新后执行
为什么点击没反应？常见失效原因
不是代码写错，而是几个隐蔽条件没满足。
立即学习“前端免费学习笔记（深入）”；
-
id值重复：页面中多个元素用了同一个id，浏览器只认第一个，后续跳转失效 -
id以数字开头：如id="1section"，部分浏览器解析异常，应改为id="section1" - 目标元素
display: none或visibility: hidden：不可见元素无法滚动定位，即使它存在 - URL 已含 hash 且值相同：比如当前地址是
index.html#faq，再点href="#faq"不会触发跳转（也不会触发hashchange）
实际项目里，锚点看似简单，但 fixed 导航栏、动态加载内容、SEO 锚点语义、无障碍聚焦这几个点一叠加，就容易出问题。别只测“能跳”，要测“跳得准、不遮挡、可回退、读屏友好”。
