仅用 html 和 css 即可实现锚点跳转时的平滑滚动效果，关键在于将 scroll-behavior: smooth 应用于实际发生滚动的容器元素（如 .container），而非全局 html 元素。
仅用 html 和 css 即可实现锚点跳转时的平滑滚动效果，关键在于将 scroll-behavior: smooth 应用于实际发生滚动的容器元素（如 .container），而非全局 html 元素。
在构建单页长内容网站（如产品介绍、营销落地页）时，常通过 <a href="#section-id"> 实现页面内导航。许多开发者尝试在 html 或 body 上设置 scroll-behavior: smooth，却发现滚动依然“瞬移”——这是因为 scroll-behavior 仅对具有滚动能力（即触发溢出滚动）的块级容器生效，而 html 元素本身通常不承担滚动职责；真正的滚动容器是设置了 overflow-y: auto 的自定义区块（例如本例中的 .container）。
✅ 正确做法：将 scroll-behavior: smooth 显式声明在滚动容器上：
.container {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
scroll-behavior: smooth; /* ✅ 关键：加在这里 */
}⚠️ 注意事项：
- 不要写 html { scroll-behavior: smooth; } —— 即使浏览器支持该属性，它也不会作用于子容器内的局部滚动；
- 确保目标容器具备可滚动条件（如内容高度 > 容器高度 + overflow-y: auto/scroll）；
- 锚点目标（如 <section id="text">）必须位于同一滚动上下文中（即 .container 内部），否则无法触发布局内平滑滚动；
- 所有现代主流浏览器（Chrome 61+、Firefox 68+、Edge 79+、Safari 15.4+）均原生支持 scroll-behavior: smooth，无需 JavaScript 或 polyfill；
- 若使用 position: fixed/sticky 头部或侧边栏，请确保其未意外截断 .container 的滚动流（可通过 z-index 和 contain: paint 进一步优化渲染性能）。
? 小技巧：为提升用户体验，可配合 :target 伪类添加轻微高亮反馈：
立即学习“前端免费学习笔记（深入）”；
section:target {
animation: highlight 1.5s ease-out;
}
@keyframes highlight {
0% { background-color: #fff3cd; }
100% { background-color: transparent; }
}综上，平滑滚动不是“魔法”，而是 CSS 滚动上下文的精准控制。只需一步修正：把 scroll-behavior: smooth 从 html 移至实际滚动容器，即可零 JS 实现专业级锚点过渡效果。
