纯CSS锚点过渡效果，CSS3的属性scroll-behavior: smooth；
今天有小伙伴询问如何在锚点中加入过渡效果，按照惯性思维会想到scrollTop或者其他可以实现的插件，有其他小伙伴提到了scroll-behavior: smooth然后查了一下这个样式功能感觉还可以：
scroll-behavior属性包括： smooth | auto;
auto: 默认值，表示滚动框立即滚动到指定位置。 smooth 表示允许滚动时采用平滑过渡，而不知直接滚动到相应位置，最常见的比如回到顶部按钮和锚点。
然后就在caniuse查了下浏览器支持情况：
非IE情况下兼容都还不错。
话不多说直接上例子：
锚点滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS的锚点滚动特效</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
/* 左边 */
.left {
width: 180px;
}
.left .anchor {
display: block;
width: 100%;
line-height: 60px;
text-align: center;
font-size: 18px;
}
/* 右边 */
.right {
width: calc(100% - 180px);
height: 100%;
overflow: auto;
/* 主要CSS内容 平滑滚动 scroll-behavior: smooth */
/* 注意：要在需要滚动的地方加该属性 */
scroll-behavior: smooth;
}
.right .main-box {
width: 100%;
height: 500px;
box-sizing: border-box;
padding: 20px 10px;
border: 3px solid #666;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<a class="anchor" href="#li1">这是1个li</a>
<a class="anchor" href="#li2">这是2个li</a>
<a class="anchor" href="#li3">这是3个li</a>
<a class="anchor" href="#li4">这是4个li</a>
<a class="anchor" href="#li5">这是5个li</a>
<a class="anchor" href="#li6">这是6个li</a>
</div>
<ul class="right">
<li class="main-box" id="li1">这是第1个li</li>
<li class="main-box" id="li2">这是第2个li</li>
<li class="main-box" id="li3">这是第3个li</li>
<li class="main-box" id="li4">这是第4个li</li>
<li class="main-box" id="li5">这是第5个li</li>
<li class="main-box" id="li6">这是第6个li</li>
</ul>
</div>
</body>
</html>
lable和input的焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.box {
width: 20em;
height: 10em;
line-height: 10em;
/* 注意：要在需要滚动的地方加该属性 */
scroll-behavior: smooth;
overflow: hidden;
margin: auto;
}
.list {
height: 100%;
background: #ddd;
text-align: center;
position: relative;
font-size: 8em;
}
.list>input {
position: absolute;
top: 0;
height: 100%;
width: 1px;
border: 0;
padding: 0;
margin: 0;
clip: rect(0 0 0 0);
}
.click {
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
border: 1px solid #ccc;
background: #f7f7f7;
color: #333;
font-size: 1em;
font-weight: bold;
text-align: center;
text-decoration: none;
cursor: pointer;
margin: 0.5em;
}
.bg-orange {
background-color: #fccba2;
}
.bg-olive {
background-color: #b9f2d8;
}
.bg-blue {
background-color: #89c6fc;
}
</style>
</head>
<body>
<!-- 使用label和input的切换demo -->
<div class="demo">
<div class="box">
<div class="list"><input id="one" readonly />1</div>
<div class="list bg-blue"><input id="two" readonly />2</div>
<div class="list bg-olive"><input id="three" readonly />3</div>
<div class="list bg-orange"><input id="four" readonly />4</div>
</div>
<div>
<label class="click" for="one">1</label>
<label class="click" for="two">2</label>
<label class="click" for="three">3</label>
<label class="click" for="four">4</label>
</div>
</div>
</body>
</html>
置顶
置顶操作就不写demo了给一些代码片段，原理与上方一样
html部分
<html id="top">
<body>
<a href="#top">跳转到页面顶部</a>
</body>
</html>
css部分
<style>
html {
scroll-behavior: smooth;
}
</style>
注意：要在需要滚动的地方加该属性
以上内容就是对CSS3属性scroll-behavior: smooth的描述，如有问题欢迎留言讨论