最轻量方案是给html元素设置scroll-behavior: smooth；需确保锚点href与目标id严格一致（大小写、符号），JavaScript手动滚动须显式传入{behavior: 'smooth'}，iOS Safari兼容性差时可用JS兜底。
锚点跳转默认太生硬，怎么加平滑滚动？
直接在 <html> 标签上加 scroll-behavior: smooth 就行，这是最轻量、兼容性够用（Chrome 61+、Firefox 36+、Safari 15.4+、Edge 79+）的方案。
别在每个 <a href="#xxx"> 上写 JS，也别用第三方库——纯 CSS 就能解决。
- 写法：
<html style="scroll-behavior: smooth;">
- 或者更推荐写进 CSS 文件或
<style>块：html { scroll-behavior: smooth; } - 注意：这个声明只对通过 URL 锚点（如
#section2）或element.scrollIntoView()触发的滚动生效，对window.scrollTo()默认不生效，除非显式传入{ behavior: 'smooth' }
JavaScript 手动触发平滑滚动时 behavior 参数漏了
用 scrollIntoView 或 scrollTo 时，必须显式写 { behavior: 'smooth' }，否则还是瞬间跳转。
document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });window.scrollTo({ top: 0, behavior: 'smooth' });- 旧写法
element.scrollIntoView(true)已废弃，true表示“自动”，但不控制平滑与否；现在必须用对象参数 - 如果页面有 sticky header，记得加
block: 'start'或计算 offset，否则可能被遮挡
点击锚点后 URL 带 # 却没滚动？检查 href 和 id 是否严格匹配
大小写、连字符、下划线、空格都必须完全一致——HTML ID 是区分大小写的，且空格会被浏览器自动转成 %20 导致失配。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<a href="#about-us">对应<div id="about us">→ 不滚动（空格 ≠ 连字符） - 正确写法：
<a href="#about-us">+<div id="about-us"> - ID 不要以数字开头（如
id="1section"），部分老浏览器解析异常；建议用字母开头，如id="section1" - 动态生成的 DOM 元素，确保
id在点击前已存在，否则滚动目标找不到
iOS Safari 滚动卡顿或失效？绕过渲染时机问题
iOS Safari 对 scroll-behavior: smooth 支持较晚（15.4+），且在某些混合滚动场景（比如页面有 overflow: hidden 的父容器）下会静默失效。
- 临时补救：监听
click后用 JS 强制触发，例如：document.querySelectorAll('a[href^="#"]').forEach(a => a.addEventListener('click', e => { e.preventDefault(); document.querySelector(a.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); })); - 避免给
<body>或<html>设height: 100%+overflow: hidden，这会破坏原生锚点机制 - 如果用了
position: fixed导航栏，记得在scrollIntoView里加margin-top补偿，或用scroll-margin-topCSS 属性（支持度同scroll-behavior）
实际跑起来，80% 的场景靠一行 CSS 就搞定；剩下那些边界情况，往往卡在 ID 匹配或 iOS 渲染时机上，而不是代码逻辑本身。
