锚点链接不滚动需检查href与目标id严格匹配（区分大小写、无空格特殊字符）；平滑滚动用scrollintoview({behavior:'smooth'})并preventdefault()；滚动监听推荐intersectionobserver；固定头部遮挡用scroll-margin-top。
锚点链接点击后不滚动？检查 href 值和目标元素 id 是否严格匹配
浏览器原生锚点跳转依赖 href 与目标元素 id 的精确一致（区分大小写、不可含空格或特殊字符）。常见错误是链接写成 href="#section1"，但目标元素却是 <div id="Section1"> 或 <code><div id="section-1"> —— 这会导致静默失败，无报错也无滚动。
<p>实操建议：</p>
<ul>
<li>用浏览器开发者工具检查目标元素是否真有对应 <code>id，且未被 JS 动态移除
id 中使用中文、空格、下划线开头（部分旧浏览器不兼容），推荐纯小写字母 + 连字符，如 faq-list
<h2 id="contact"></h2>，链接必须为 <a href="#contact"></a>，不能是 <a href="contact"></a>（缺 #）或 <a href="https://example.com#contact"></a>（跨域时可能失效）如何让滚动平滑且不破坏浏览器历史？用 scrollIntoView + { behavior: 'smooth' }
原生锚点跳转默认突兀，且每次点击都会新增 history 记录，影响返回逻辑。改用 JS 控制可兼顾体验与可控性。
实操建议：
- 给导航链接加
preventDefault()，再调用目标元素的scrollIntoView({ behavior: 'smooth', block: 'start' }) - 若需保留前进/后退能力，调用
history.replaceState()手动更新 URL hash，而非依赖原生跳转 -
block: 'start'确保元素顶部对齐视口，block: 'center'可能导致部分内容被 header 遮挡，需配合scroll-margin-top修正
滚动监听时频繁触发回调？用 IntersectionObserver 替代 scroll 事件
监听滚动位置来高亮当前导航项时，直接绑定 scroll 事件易造成性能问题，尤其在移动端或内容密集页。每像素滚动都可能触发重排重绘。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
实操建议：
- 用
IntersectionObserver监听各内容区块的可视状态，只在进入/离开视口时响应 - 设置
threshold: [0.1]表示当区块 10% 进入视口即触发，比监听绝对偏移量更鲁棒 - 注意：需为每个目标元素单独 observe，且 observer 实例应复用，不要在每次 scroll 中新建
固定头部遮挡锚点目标？用 scroll-margin-top 而非 JS 偏移计算
当页面有 position: fixed 的 header 时，原生锚点滚动会让目标元素顶到视口最上方，结果被 header 盖住。传统做法是 JS 计算 offset 并手动 scroll，但维护成本高、响应慢。
实操建议：
- 直接在目标元素上设置 CSS：
scroll-margin-top: 64px（值等于 header 高度） - 该属性已被 Chrome 89+、Firefox 89+、Safari 15.4+ 原生支持，无需 polyfill
- 若需兼容旧版 Safari，可降级为在
scrollIntoView后手动调整window.scrollBy(0, -64)，但注意避免重复触发
scroll-margin-top 和 JS 滚动补偿混用时的竞态，这些边界情况往往只在真实滚动节奏里暴露。
