今天有小伙伴询问如何在锚点中加入过渡效果，按照惯性思维会想到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>
置顶
下边完整的置顶操作dome，这里采用JQ的方式进行操作，如果你用react或vue，请注意元素的加载情况，采用nextTick和生命周期函数来保证元素加载并能使用这个操作逻辑。
置顶操作实例视频
<!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>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100vh;
background-color: #f5f5f5;
box-sizing: border-box;
overflow: hidden;
}
.box {
max-width: 800px;
width: 100%;
margin: 0 auto;
/* 滚动特效
* 以及滚动特效的条件，为overflow的 auto属性或者scroll属性，内容允许滚动的
*/
height: 100%;
overflow: auto;
scroll-behavior: smooth;
background-color: #fff;
}
.box li {
list-style: none;
margin-bottom: 10px;
background-color:bisque;
box-sizing: border-box;
padding: 20px;
min-height: 300px;
}
.box li h2 {
line-height: 50px;
}
.btn {
width: 120px;
height: 40px;
margin-top: 20px;
background-color: #1a84dd;
color: #fff;
outline: none;
border: none;
border-radius: 10px;
cursor: pointer;
}
.btn:hover {
background-color: #12609f;
transition: background 0.02s;
}
</style>
</head>
<body>
<ul class="box">
<li id="list1"><h2>这是list1 </h2><button class="btn">置顶按钮</button></li>
<li id="list2"><h2>这是list2 </h2><button class="btn">置顶按钮</button></li>
<li id="list3"><h2>这是list3 </h2><button class="btn">置顶按钮</button></li>
<li id="list4"><h2>这是list4 </h2><button class="btn">置顶按钮</button></li>
<li id="list5"><h2>这是list5 </h2><button class="btn">置顶按钮</button></li>
<li id="list6"><h2>这是list6 </h2><button class="btn">置顶按钮</button></li>
<li id="list7"><h2>这是list7 </h2><button class="btn">置顶按钮</button></li>
<li id="list8"><h2>这是list8 </h2><button class="btn">置顶按钮</button></li>
<li id="list9"><h2>这是list9 </h2><button class="btn">置顶按钮</button></li>
<li id="list10"><h2>这是list10 </h2><button class="btn">置顶按钮</button></li>
<li id="list11"><h2>这是list11 </h2><button class="btn">置顶按钮</button></li>
<li id="list12"><h2>这是list12 </h2><button class="btn">置顶按钮</button></li>
<li id="list13"><h2>这是list13 </h2><button class="btn">置顶按钮</button></li>
<li id="list14"><h2>这是list14 </h2><button class="btn">置顶按钮</button></li>
<li id="list15"><h2>这是list15 </h2><button class="btn">置顶按钮</button></li>
<li id="list16"><h2>这是list16 </h2><button class="btn">置顶按钮</button></li>
<li id="list17"><h2>这是list17 </h2><button class="btn">置顶按钮</button></li>
<li id="list18"><h2>这是list18 </h2><button class="btn">置顶按钮</button></li>
<li id="list19"><h2>这是list19 </h2><button class="btn">置顶按钮</button></li>
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
/**
* 置顶对应的元素Id
* @params {String} 传入要根据置顶元素的id，可以带#号也可以不带
*/
function setTop(id){
const a = document.createElement('a');
if(/^#.+/.test(id)){
a.href = id;
}else{
a.href = '#'+id;
}
// const click = new MouseEvent('click');
const clickEvent = document.createEvent('MouseEvent');
clickEvent.initEvent('click', true, true);
a.dispatchEvent(clickEvent);
}
$('.btn').click(function(){
const $this = $(this);
// 使用parents可以嵌套多层使用，如果直接套用例子也可以
const parentDom = $this.parents('li');
const parentId = parentDom.attr('id');
setTop(parentId);
})
</script>
</html>
置顶操作的js，根据传入元素的id进行定位到指定元素的位置
/**
* 置顶对应的元素Id
* @params {String} 传入要根据置顶元素的id，可以带#号也可以不带
*/
function setTop(id){
const a = document.createElement('a');
if(/^#.+/.test(id)){
a.href = id;
}else{
a.href = '#'+id;
}
// const click = new MouseEvent('click');
const clickEvent = document.createEvent('MouseEvent');
clickEvent.initEvent('click', true, true);
a.dispatchEvent(clickEvent);
}
注意：要在需要滚动的地方加该属性，滚动特效的条件，为overflow的 auto属性或者scroll属性，内容允许滚动的，所加该属性的元素内容，必须是允许滚动的
以上内容就是对CSS3属性scroll-behavior: smooth的描述，如有问题欢迎留言讨论
