通过在 HTML 元素上设置 scroll-behavior: smooth，可一键启用页面内锚点跳转的原生平滑滚动效果，无需 JavaScript 动画库，兼容现代浏览器。
通过在 html 元素上设置 `scroll-behavior: smooth`，可一键启用页面内锚点跳转的原生平滑滚动效果，无需 javascript 动画库，兼容现代浏览器。
实现平滑滚动动画最简洁、高效的方式，是利用 CSS 的 scroll-behavior 属性。它专为控制滚动容器（如 <html> 或 <div>）的滚动行为而设计，支持 auto（默认突兀跳转）和 smooth（流畅过渡）两种值。
✅ 推荐写法（全局平滑滚动）：
只需在 CSS 中添加以下规则，即可让所有锚点链接（如 #about、#contact）自动启用平滑滚动：
html {
scroll-behavior: smooth;
}⚠️ 注意：该声明必须作用于根滚动容器 —— 即 <html> 元素（而非 body），因为 body 在多数浏览器中并非实际滚动容器，设置无效。
? 配套 HTML 结构示例：
确保你的页面包含对应 ID 的目标元素，例如：
<button id="scroll">Scroll to About</button> <!-- ... 页面其他内容 ... --> <section id="about"> <h2>About Us</h2> <p>This section will be scrolled to smoothly.</p> </section>
? JavaScript 保持简洁（无需修改）：
你原有的点击逻辑完全可用，且更语义化：
const btn = document.getElementById('scroll');
btn.addEventListener('click', () => {
window.location.href = '#about';
});✅ 补充说明：也可使用 element.scrollIntoView({ behavior: 'smooth' }) 实现 JS 驱动的精确滚动（如滚动到某个 DOM 节点），但对简单锚点跳转，纯 CSS 方案更轻量、可维护性更高。
? 浏览器兼容性：
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持 Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+（iOS Safari 15.4+）
- ❌ 不支持旧版 Safari（<15.4）或 IE —— 如需兼容，可搭配 smooth-scroll-polyfill 等轻量 Polyfill。
? 进阶提示：若仅需局部区域（如某 <div class="scroller">）启用平滑滚动，可对其单独设置：
.scroller {
scroll-behavior: smooth;
overflow-y: auto;
height: 400px;
}总之，scroll-behavior: smooth 是现代 Web 开发中实现优雅锚点滚动的首选方案：零依赖、高可读、低维护成本。
