下面是 css 锚点跳转的一个例子：
<style>#page-1 {width: 100%;height: 800px;background: red;font-size: 120px;text-align: center;}#page-2 {width: 100%;height: 800px;background: green;font-size: 120px;text-align: center;}#page-3 {width: 100%;height: 800px;background: blue;font-size: 120px;text-align: center;}</style><body><div id="app"><nav><a href="#page-1">1</a><a href="#page-2">2</a><a href="#page-3">3</a></nav><div id="page-1">1</div><div id="page-2">2</div><div id="page-3">3</div></div></body>
实现的效果是点击对应的 a 标签可以跳转到对应的 div 内容。
但是没有实现平滑滚动，比如下面图片的那种效果。
我们可以使用：scroll-behavior: smooth;
html {scroll-behavior: smooth;}
MDN ：CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。
通常我们使用 JS 实现返回顶部的功能：
document.querySelector("#js-scroll-to-top").addEventListener("click", (e) => {e.preventDefault();window.scroll({top: 0,left: 0,behavior: "smooth" // 指定滚动是否应该平滑进行，还是立即跳到指定位置。});});
当点击“返回顶部”按钮时，用户会看到一些吸引眼球的内容，并且希望停止滚动，因此当他们再次操作鼠标滚轮进行了繁琐的滚动操作，就需要立即停止滚动。通过上面代码的 JS 是无法实现的，但是我们可以通过属性 scroll-behavior 配合锚点跳转来实现。
<style>html {scroll-behavior: smooth;}</style><body><div id="app"><a href="#">回到顶部</a></div></body>
这样就可以了。
