纯css锚点跳转过渡效果 - 神奇的scroll-behavio

作者: 饥人谷_米弥轮 | 来源:发表于2019-11-20 17:13 被阅读0次

纯css锚点跳转过渡效果 - 神奇的scroll-behavio
jquery实现页面内链接锚点跳转平滑滚动效果
html
CSS学习笔记——一些属性
使用CSS3解决锚点跳转内容被遮盖的问题.md
HTML锚点定位的一些感受
animation动画
锚点跳转
JS在页面上快速定位（锚点跳转问题）
href之锚点跳转

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

<!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>

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的小伙伴来说，这个属性简直就是好用到爆，而且过渡的流畅度还挺好的。