在网页开发过程中，实现页面平滑滚动到指定位置是提升用户体验的重要交互设计，以往很多开发者会依赖JavaScript编写滚动逻辑，实际上CSS本身就提供了原生的平滑滚动支持，只需要简单的属性配置就能实现效果，无需额外编写复杂的脚本代码。
核心属性：scroll-behavior
实现CSS平滑滚动的核心属性是scroll-behavior，这个属性用来定义滚动容器在滚动时的行为，可选值有两个：
- auto：默认值，滚动行为是瞬间的，没有过渡效果
- smooth：滚动行为会有平滑的过渡效果，滚动过程会更自然
这个属性可以应用在根元素html或者任意可滚动的容器元素上，当设置值为smooth时，容器内的所有滚动操作都会触发平滑过渡。
全局平滑滚动配置
如果希望整个页面的所有滚动操作都默认使用平滑效果，可以直接给根元素html设置该属性：
/* 全局开启平滑滚动 */
html {
scroll-behavior: smooth;
}
设置之后，页面内的所有锚点跳转、调用scrollTo等滚动API的操作，都会自动带有平滑过渡效果。
局部容器平滑滚动
如果只需要某个特定的滚动容器使用平滑效果，不需要全局生效，可以给对应的容器单独设置属性：
/* 类名为scroll-container的容器开启平滑滚动 */
.scroll-container {
width: 100%;
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}
锚点跳转场景实现
最常见的平滑滚动场景是点击锚点链接跳转到页面指定位置，结合scroll-behavior: smooth可以轻松实现：
HTML结构
<!-- 导航锚点 -->
<nav>
<a href="#section1">跳转到第一节</a>
<a href="#section2">跳转到第二节</a>
<a href="#section3">跳转到第三节</a>
</nav>
<!-- 内容区域 -->
<div class="content">
<section id="section1" style="height: 600px; background: #f0f0f0;">
<h2>第一节内容</h2>
</section>
<section id="section2" style="height: 600px; background: #e0e0e0;">
<h2>第二节内容</h2>
</section>
<section id="section3" style="height: 600px; background: #d0d0d0;">
<h2>第三节内容</h2>
</section>
</div>
配套CSS
/* 给根元素开启平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 导航样式 */
nav {
position: fixed;
top: 20px;
left: 20px;
display: flex;
gap: 15px;
}
nav a {
padding: 8px 15px;
background: #1890ff;
color: white;
text-decoration: none;
border-radius: 4px;
}
点击导航中的链接时，页面会自动平滑滚动到对应id的section位置，不需要任何JavaScript代码。
手动触发滚动场景
如果是通过JavaScript手动触发滚动到指定位置，只要容器已经设置了scroll-behavior: smooth，同样会生效：
// 获取滚动容器，这里以根容器为例
const container = document.documentElement;
// 滚动到距离顶部500px的位置，会自动带平滑效果
container.scrollTo({
top: 500,
behavior: 'smooth' // 这里也可以不写，因为CSS已经全局设置了smooth
});
// 也可以滚动到指定元素位置
const targetElement = document.getElementById('section2');
targetElement.scrollIntoView({
behavior: 'smooth'
});
需要注意的是，如果CSS已经给容器设置了scroll-behavior: smooth，那么JavaScript中调用滚动API时即使不指定behavior为smooth，也会默认使用平滑效果。
注意事项
- 兼容性：
scroll-behavior属性在现代浏览器中支持度已经很高，但是在IE浏览器中完全不支持，如果需要兼容IE，还是需要 fallback 到JavaScript实现 - 性能：CSS原生平滑滚动由浏览器底层优化，性能比自己编写的JavaScript滚动逻辑更好，不会有卡顿问题
- 动态内容：如果滚动容器的内容是动态加载的，只要容器本身已经设置了
scroll-behavior: smooth，新内容加载后的滚动操作同样会生效 - 滚动容器识别：只有设置了
overflow属性为非visible的元素才会成为可滚动容器，给普通元素设置scroll-behavior不会生效
总结
用CSS实现平滑滚动到指定位置是非常高效的方案，核心就是使用scroll-behavior: smooth属性，既可以全局配置也可以局部配置，适配锚点跳转、手动触发滚动等多种场景，能有效减少JavaScript代码量，提升页面性能。在实际开发中，如果不需要兼容老旧浏览器，优先选择CSS方案实现平滑滚动会更合适。
CSS平滑滚动scroll-behavior锚点定位页面交互修改时间：2026-06-30 12:36:40