在较长的页面中，为了便于用户浏览，开发人员经常会使用锚点链接，锚点链接默认的效果是瞬间跳转，为了让用户体验更好，往往会添加滚动效果。我记得要实现滚动效果，以前一般是结合一段JavaScript代码来实现。
后来偶然知道了scroll-behavior: smooth;这个CSS属性，觉得用来实现滚动效果非常方便。
今天练习了一下这个属性，发现也不是用上就能滚动过的，需要用对，有以下几个问题：
1.scroll-behavior这个属性写在哪个CSS样式中。
我练习的案例中，运行效果如下：
代码如下：
<div class="box">
<div class="left">
<div class="main-box"><a id="lishi">历史沿革</a></div>
<div class="main-box"><a id="banxue">办学条件</a></div>
<div class="main-box"><a id="xueshu">学术研究</a></div>
<div class="main-box"><a id="wenhua">文化传统</a></div>
<div class="main-box"><a id="xiaoyuan">校园环境</a></div>
</div>
<div class="right">
<a class="anchor" href="#lishi">历史沿革</a>
<a class="anchor" href="#banxue">办学条件</a>
<a class="anchor" href="#xueshu">学术研究</a>
<a class="anchor" href="#wenhua">文化传统</a>
<a class="anchor" href="#xiaoyuan">校园环境</a>
</div>
</div>
点击.right右侧的各个条目，.left左侧会跳转到相应的位置。
在本例中，写css代码的时候，scroll-behavior: smooth;这句代码应该定义在.left中，而不应该定义在.main-box中，我理解的是，在哪个区域内滚动，就写在哪里。
2.还要定义父元素的高度
除了写scroll-behavior: smooth;有些属性不写，也不会滚动，在本例中，.left
的父元素.box,高度必须要设置，不一定非要是100%
.box {
height: 100%; /*高度100%必须要写*/
display: flex;
overflow: hidden;
}
3.需要设置根元素html、body的高度,html和body的高度都要设置，只设置其中一个也不行。
html,body {
position: relative;
height: 100%; /*高度100%必须要写*/
overflow: hidden;
}
以上是我练习scroll-behavior: smooth;属性时发现的问题，若有不对之处，欢迎批评指正。完整代码如下：
<!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>平滑滚动scroll-behavior</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
color: #ff8400
}
html,body {
position: relative; /*html和body都要定义*/
height: 100%; /*高度100%必须要写*/
overflow: hidden;
}
.box {
height: 100%; /*高度100%必须要写*/
display: flex;
overflow: hidden;
}
.right {
width: 180px;
}
.right .anchor {
display: block;
width: 100%;
line-height: 60px;
text-align: center;
font-size: 16px;
}
.left {
width: calc(100% - 180px);
overflow: auto;
scroll-behavior: smooth; /*在哪个范围内滚动，就在哪里加此条语句*/
}
.left .main-box {
width: 100%;
height: 500px;
box-sizing: border-box;
padding: 20px;
border: 1px solid #23c6d9;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div class="main-box"><a id="lishi">历史沿革</a></div>
<div class="main-box"><a id="banxue">办学条件</a></div>
<div class="main-box"><a id="xueshu">学术研究</a></div>
<div class="main-box"><a id="wenhua">文化传统</a></div>
<div class="main-box"><a id="xiaoyuan">校园环境</a></div>
</div>
<div class="right">
<a class="anchor" href="#lishi">历史沿革</a>
<a class="anchor" href="#banxue">办学条件</a>
<a class="anchor" href="#xueshu">学术研究</a>
<a class="anchor" href="#wenhua">文化传统</a>
<a class="anchor" href="#xiaoyuan">校园环境</a>
</div>
</div>
</body>
</html>
