# CSS属性scroll-behavior定义浏览器滚动位置或跳转新位置行为
> scroll-behavior在CSS中的属性允许我们定义浏览器的滚动位置是否跳转到新位置，或者当用户点击指向滚动框内锚定位链接时的动画转换。即为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。
Author: DeathGhost
Published: 2018-08-27 22:32:30
Category: css
Canonical: https://www.deathghost.cn/article/css/34
Keywords: CSS, scroll-behavior, CSS滚动, 锚链接, 跳转, 单页跳转, 滚动框定位, 滚动位置
页面中不论是移动端还是PC端，我们时常会碰到内容信息过长，同时都属于片段式的内容图文，让用户一直往下滑动，一定程度上影响用户体验；今天在这里我们看看CSS这个属性scroll-behavior，随着浏览器的不断更新，大部分新版浏览器均已支持，具体大家可以参考caniuse站点。
先看示例图：
CSS属性scroll-behavior示例图
操作中注意滚动框的高度设置（height:100px;），同时其溢出（overflow-y:scroll;）
看看其语法属性值：
.module {
scroll-behavior: [ auto | smooth ];
}
该scroll-behavior属性接受两个值，auto与smooth；
auto跳转的相对果断，而smooth相对委婉一点（正如其名），普遍情况我们当然选择smooth，具体根据情况而定。
在这里我将简单的demo代码也贴出来。
*{font-family:'microsoft yahei';font-size:14px;box-sizing: border-box;}
h1{margin:0;font-size:18px;}
a{text-decoration: none;color:white;}
nav,main{width:640px;margin:0 auto;border:1px grey solid;margin-bottom:10px;}
nav{background:black;}
main{height:100px;overflow-y:scroll;scroll-behavior: smooth;}
nav ul{display:flex;list-style: none;margin:0;padding:0;}
nav ul li{flex:auto; text-align:center;font-weight:bold;height:45px;line-height:45px;}
section{height:100vh;padding:15px;background-color:lightgrey;color:white;}
section:nth-of-type(odd){background-color:grey;}
## Related
- Previous: [合理借助CSS伪元素:before与:after实现页面辅助设计 CSS伪元素实例应用技巧](https://www.deathghost.cn/article/css/33)
- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)