a标签锚点平滑滚动：

关键——scroll-behavior: smooth;

原文地址

类似

关键：主要放在content的css样式上，必须在id的父容器

作用在容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。利用这个css属性可以一步将原来纯css标签直接切换，变成平滑过渡切换效果。

按钮的制作：

input中的checkbox复选框中的：checked（被选中执行），父容器laber子元素input（checkbox类型）和兄弟div，div的子元素为兄弟span，两个设置不同的样式（off-on）通过input：checked改变兄弟div的子元素span1和span2的位置（left改变），对div使用transition添加过渡。