我们在浏览网站时，经常会看到返回顶部和楼层跳转的效果，但是这些大部分都是通过js来实现的。那么不用js也可以实现吗？答案是可以的。
ok，先上代码，下面再进行了解！
html：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title></head><body><nav><a href="#page-1">1</a><a href="#page-2">2</a><a href="#page-3">3</a><a href="#page-4">4</a><a href="#page-5">5</a></nav><div class="box"><div id="page-1">1</div><div id="page-2">2</div><div id="page-3">3</div><div id="page-4">4</div><div id="page-5">5</div></div></body></html>
css：
body,html{scroll-behavior: smooth;}nav {width: 790px;padding: 5px;border: 1px solid black;}a{font-size: 2em;text-decoration: none;}.box {width: 800px;}.box div {height: 500px;border: 1px solid #000000;font-size: 5em;}
注意我给body，html写了一个scroll-behavior: smooth，也正是因为这个属性，才使得锚点跳转有过渡效果。
可以说对于不懂js的小伙伴来说，这个属性简直就是好用到爆，而且过渡的流畅度还挺好的。
下面我们来了解下scroll-behavior：
语法：scroll-behavior有两个属性值，默认auto
auto:滚动框立即滚动
smooth:实现平稳的滚动
用法：哪个容器需要滚动就在那里加上scroll-behaviorr: smooth（简单粗暴的理解 - -！）
这个属性虽然好用，但是兼容性还是值得考虑，目前IE不支持这个属性
想了解更多的小伙伴，可以到/wordpress//10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8/，这位大佬的博客看下。
![[css] css中Scroll-behavior属性有什么应用场景？](https://100zi.50zi.cn/uploadfile/img/14/889/8926dc95da57be79f368f7e023e0e375.jpg)
![CSS3最颠覆性的动画效果 基本属性[过渡和2D]](https://100zi.50zi.cn/uploadfile/img/15/974/27787b1c8264fa37cb74421cffd38b9a.jpg)
