纯css锚点跳转过渡效果 - 神奇的scroll-behavior属性

• 我们在浏览网站时，经常会看到返回顶部和楼层跳转的效果，但是这些大部分都是通过js来实现的。如何直接使用css实现

    
    
    
    


  

      1
      2
      3
      4
      5
  
  

    
1
    
2
    
3
    
4
    
5
  

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有两个属性值，默认auto
auto:滚动框立即滚动
smooth:实现平稳的滚动

更多的关于滚动的方法(如：JS scrollIntoView方法)可以到这位大佬的博客了解：张鑫旭