锚点链接必须以#开头且目标元素需有对应id，scroll-behavior: smooth可实现原生平滑滚动，但iOS Safari中position: fixed可能导致卡顿，JS方案需防重复绑定和默认行为冲突。
锚点链接必须带 # 且目标元素要有对应 id
浏览器只认 id 属性匹配的锚点，name 已废弃。写成 <a href="section2"> 是无效的，必须是 <a href="#section2">，同时目标元素得是 <div id="section2"> 或其他带 id="section2" 的标签。常见错误是漏掉 #，或把 id 拼错（比如大小写不一致、多空格、中文字符），跳转会静默失败。
用 scroll-behavior: smooth 开启原生平滑滚动
这是最轻量、兼容性足够（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+）的方案，无需 JS。只需在 <html> 或 <body> 上加一行 CSS：
html {
scroll-behavior: smooth;
}
注意：scroll-behavior 只对通过 href="#xxx" 触发的跳转生效，对 JS 的 scrollTo() 也有效，但不改变页面加载时的初始滚动行为（即 URL 带锚点刷新后仍会“硬跳”）。部分旧版 Safari 需要加 -webkit- 前缀，但现代项目可忽略。
JS 方案要避免重复绑定和默认行为冲突
如果需要更精细控制（如滚动偏移、回调），用 addEventListener 监听点击，但必须调用 event.preventDefault()，否则会先触发原生跳转再执行 JS，造成两次滚动或错位。
立即学习“前端免费学习笔记（深入）”；
常见问题包括：
- 给所有
a[href^="#"]绑定事件，但没排除外部链接（如href="#https://example.com"） - 目标元素未渲染完成就触发滚动，导致
offsetTop计算为 0（尤其在 Vue/React 中） - 未处理
history.pushState后退时的滚动位置，需监听popstate
基础安全写法示例：
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href').slice(1);
const targetEl = document.getElementById(targetId);
if (targetEl) {
e.preventDefault();
targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
移动端 Safari 的滚动卡顿与 position: fixed 冲突
在 iOS Safari 中，若页面有 position: fixed 元素（如吸顶导航栏），scroll-behavior: smooth 可能失效或滚动抖动。临时解法是跳转前移除 fixed 样式，滚动完成后再恢复；更稳妥的是改用 JS 的 scrollTo 并配合 transform: translateY() 模拟固定定位。另一个隐藏坑是：Safari 对 scroll-behavior 的支持在某些混合内容（如 iframe、Webview）中不稳定，上线前务必真机测试。
