如何在 HTML 锚点链接中设置 href 属性实现平滑滚动效果

直接写 href="#id" 可触发平滑滚动，但需满足全部条件：href 必须为合法 hash 格式（如 #about），id 与 href 严格大小写一致、无空格/中文/特殊字符、不以数字开头；目标元素必须已渲染且可见；scroll-behavior: smooth 必须作用于 html 元素；页面需具备可滚动上下文，且未被系统“减少动画”偏好禁用。

直接写 href="#id" 就能触发平滑滚动，但前提是整个链路都得对——错一个字符、少一个符号、位置写错，就退回“咔”的瞬移。

href 必须是合法 hash 格式

浏览器只识别以 # 开头的 href 值，其他写法会被当普通链接处理，不触发锚点逻辑：

• href="about" → 普通跳转，404 或刷新页面
• href="/#about" → 页面重载，不是锚点跳转
• href="?id=about" → 查询参数，不滚动
• href="#about" ✅ 唯一正确格式

href 和目标 id 必须严格一致

ID 匹配区分大小写，且空格、中文、特殊符号都会导致静默失败：

• <a href="#Contact"> 对应 <div id="contact"> → 不匹配（大小写）
• <a href="#about us"> 对应 <div id="about-us"> → 不匹配（空格 ≠ 连字符）
• <a href="#faq-list"> 对应 <h2 id="faq-list"> ✅ 推荐用短横线分隔，全小写
• ID 不能以数字开头：id="1section" 在旧 Safari 中可能找不到元素

动态内容中 href 要等 DOM 就绪再生效

Vue/React 里用 v-if 或 useState 控制显示时，点击链接若目标元素还没挂载，document.getElementById() 返回 null，JS 触发滚动会报错，CSS 方案则完全不响应：

立即学习“前端免费学习笔记（深入）”；

• 确保 id 元素在点击前已存在于 DOM 中（比如用 v-show 替代 v-if，或在 mounted / useEffect 后再绑定事件）
• 如果必须用条件渲染，JS 手动滚动前加判断：if (el) el.scrollIntoView({ behavior: 'smooth' })
• 不要依赖 setTimeout 硬等，容易时序错乱；优先用框架提供的生命周期钩子

scroll-behavior 生效的前提不是 href 写对，而是 html 滚动容器可用

href="#id" 能滚动的前提，是页面本身可滚动——这点常被忽略：

• 如果 html 或 body 上写了 height: 100vh、overflow: hidden，整个页面失去滚动能力，scroll-behavior 白加
• 某些 UI 框架（如 Next.js 默认布局）会插入 wrapper div，使真实滚动根节点变成该容器，而非 html，此时需检查 document.documentElement 是否为滚动容器
• 用户开启系统级「减少动画」偏好（@media (prefers-reduced-motion: reduce)）时，该属性会被浏览器静默禁用，不报错也不提示