在较长的页面中，为了便于用户浏览，开发人员经常会使用锚点链接，锚点链接默认的效果是瞬间跳转，为了让用户体验更好，往往会添加滚动效果。我记得要实现滚动效果，以前一般是结合一段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>
