在我们构建现代网页时，细节往往决定了用户体验的高低。你是否注意过，当用户点击页面内的锚点链接时，页面是生硬地跳转到目标位置，还是优雅地平滑滚动过去？今天，我们来深入探讨 scroll-behavior 这个 CSS 属性，它正是用来实现那种令人愉悦的平滑滚动效果，而不是突兀的瞬间跳转。通过这个属性，我们可以让用户在可滚动容器内的导航体验变得更加流畅和自然。
语法
scroll-behavior: auto|smooth|initial|inherit;
属性值详解
默认值： auto
该属性接受以下几个值，让我们来看看它们的具体含义：
- smooth： 这是我们最感兴趣的值。它指定了滚动位置应该呈现平滑的动画效果，而不是直接跳转。
- auto： 这是默认行为，表示滚动位置会直接跳转到目标点，不使用任何过渡动画。
代码实例：体验平滑滚动
让我们通过具体的代码来感受一下区别。在第一个例子中，我们将使用 scroll-behavior: smooth; 属性。
示例 1：使用平滑滚动
html
.g4g {
font-size: 40px;
font-weight: bold;
color: green;
text-align: center;
}
html {
scroll-behavior: smooth;
}
#top {
height: 400px;
background-color: coral;
}
#bottom {
height: 400px;
background-color: lightblue;
}
a {
text-decoration: none;
font-size: 25px;
font-weight: bold;
}
Scroll-behaviour:smooth;
专为程序员打造的计算机科学门户。
输出效果：
当你点击示例中的链接时，页面会平滑地过渡到目标位置，视觉体验非常舒适。
代码实例：默认跳转行为
在这个例子中，我们将移除平滑效果，恢复默认的 scroll-behavior: auto; 属性，看看有什么不同。
示例 2：使用自动跳转
html
.g4g {
font-size: 40px;
font-weight: bold;
color: green;
text-align: center;
}
html {
scroll-behavior: auto;
}
#top {
height: 400px;
background-color: coral;
}
#bottom {
height: 400px;
background-color: lightblue;
}
a {
text-decoration: none;
font-size: 25px;
font-weight: bold;
}
scroll-behaviour:auto;
专为程序员打造的计算机科学门户。
输出效果： !image
在这个示例中，页面会瞬间跳转到目标位置，没有任何过渡效果。
浏览器兼容性
在将这一特性应用到生产环境之前，我们需要了解各大浏览器的支持情况。以下是支持 scroll-behavior 属性 的主流浏览器版本：
- Google Chrome 61.0 及以上
- Edge 79.0 及以上
- Firefox 36.0 及以上
- Opera 48.0 及以上
- Safari 15.4 及以上