一行代码实现页面平滑滚动

这个方法虽然现在兼容性不怎么好，但是只一行代码，简单方便易操作，而且更符合渐进增强，这个是从别的地方看来的，具体是哪我也忘了，如果有人看到了可以告诉我，我把这个的出处写上

	    <ul class="menu">
			<li><a href="#html">html</a></li>
			<li><a href="#css">css</a></li>
			<li><a href="#js">js</a></li>
		</ul>
		<ul class="body">
			<li id="html">html</li>
			<li id="css">css</li>
			<li id="js">js</li>
		</ul>

$blue:aqua;
$red:#ea7575;
$green:#83c16f;
body,html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
html{
  scroll-behavior:smooth;
}
ul li{
  list-style:none;
}
.menu{
  position:fixed;
  background:#333;
}
.menu li{
  float:left;
  width:100px;
  height:50px;
  
  margin-left:50px;
  text-align:center;
  line-height:50px;
}
a{
  color:#fff;
}
.menu:after{
  content:"";
  display:block;
  clear:both;
}
.body{
  width:100%;
  height:100%;
}
.body li{
  height:100%;
  text-align:center;
}
.body li:first-child{
  background:$blue;
}
.body li:nth-child(2){
  background:$red;
}
.body li:nth-child(3){
  background:$green;
}

其中最关键的一句在这：

html{
  scroll-behavior:smooth;
}