什么是平滑滚动导航条
平滑滚动导航条指的是当用户点击导航栏中的不同选项时，页面不会生硬地瞬间跳转到对应区域，而是会以缓慢平滑的动画效果滚动到目标位置，这种交互方式能大幅提升用户的使用感受，在单页应用和长内容页面中非常常见。
核心CSS属性介绍
实现平滑滚动效果最核心的CSS属性是scroll-behavior，这个属性用于设置元素滚动时的行为，只需要将其值设置为smooth，就可以让元素的滚动产生平滑过渡的效果。
该属性的常用取值如下：
- auto：默认值，滚动行为由浏览器决定，通常是瞬间跳转
- smooth：滚动时产生平滑的动画过渡效果
完整实现步骤
1. 构建基础HTML结构
首先需要创建导航条和对应的内容区域，导航条的每个链接需要指向对应内容区域的id，这样点击时才能跳转到正确位置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平滑滚动导航条示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 导航条区域 -->
<nav class="nav-bar">
<ul>
<li><a href="#section1">区域一</a></li>
<li><a href="#section2">区域二</a></li>
<li><a href="#section3">区域三</a></li>
<li><a href="#section4">区域四</a></li>
</ul>
</nav>
<!-- 内容区域 -->
<main class="content">
<section id="section1" class="content-section">
<h2>第一个内容区域</h2>
<p>这里是第一个区域的内容，你可以添加任意文本、图片等元素。</p>
</section>
<section id="section2" class="content-section">
<h2>第二个内容区域</h2>
<p>这里是第二个区域的内容，滚动效果会在点击导航时体现。</p>
</section>
<section id="section3" class="content-section">
<h2>第三个内容区域</h2>
<p>这里是第三个区域的内容，平滑滚动会让跳转更自然。</p>
</section>
<section id="section4" class="content-section">
<h2>第四个内容区域</h2>
<p>这里是第四个区域的内容，试试点击导航栏的选项查看效果。</p>
</section>
</main>
</body>
</html>
2. 编写CSS样式
接下来设置导航条的基础样式，同时给根元素添加scroll-behavior: smooth属性，让整个页面的滚动都生效平滑效果。
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置全局平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 导航条样式 */
.nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
padding: 15px 0;
z-index: 100;
}
.nav-bar ul {
display: flex;
justify-content: center;
list-style: none;
}
.nav-bar li {
margin: 0 20px;
}
.nav-bar a {
color: #fff;
text-decoration: none;
font-size: 16px;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s;
}
.nav-bar a:hover {
background-color: #555;
}
/* 内容区域样式 */
.content {
margin-top: 70px; /* 避免内容被固定导航条遮挡 */
}
.content-section {
height: 100vh; /* 每个区域占满一屏高度 */
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 给不同区域设置不同背景色方便区分 */
#section1 { background-color: #f0f8ff; }
#section2 { background-color: #e6e6fa; }
#section3 { background-color: #f5f5dc; }
#section4 { background-color: #ffe4e1; }
.content-section h2 {
font-size: 32px;
margin-bottom: 20px;
}
.content-section p {
font-size: 18px;
color: #333;
}
3. 效果验证
将上面的HTML和CSS代码分别保存为index.html和style.css，放在同一个目录下，用浏览器打开index.html文件，点击导航条上的不同选项，就可以看到页面平滑滚动到对应区域的效果。
注意事项
- 如果只需要某个特定容器内的滚动生效平滑效果，不需要给
html元素设置scroll-behavior，直接给对应的容器元素设置即可。 - 部分非常老旧的浏览器可能不支持
scroll-behavior属性，如果需要兼容这些浏览器，可以额外添加JavaScript的滚动逻辑作为降级方案。 - 如果页面中有锚点跳转的其他需求，平滑滚动效果同样会生效，不需要额外做适配。
兼容降级方案
如果需要兼容不支持scroll-behavior的浏览器，可以添加如下JavaScript代码实现平滑滚动效果：
// 获取所有导航链接
const navLinks = document.querySelectorAll('.nav-bar a');
// 给每个链接添加点击事件
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault(); // 阻止默认跳转行为
const targetId = this.getAttribute('href'); // 获取目标区域id
const targetElement = document.querySelector(targetId); // 获取目标元素
if (targetElement) {
// 使用scrollIntoView方法实现平滑滚动，behavior设置为smooth
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
这段JavaScript代码会在点击导航链接时，调用scrollIntoView方法实现平滑滚动，即使浏览器不支持CSS的scroll-behavior属性，也能正常生效平滑滚动效果。
CSS平滑滚动导航条scroll-behavior修改时间：2026-07-07 22:12:14