纯css锚点跳转过渡效果-神奇的scroll-behavior属性
我们在浏览⽹站时，经常会看到返回顶部和楼层跳转的效果，但是这些⼤部分都是通过js来实现的。那么不⽤js也可以实现吗？答案是可以的。
ok，先上代码，下⾯再进⾏了解！
html：
<!DOCTYPE html>div border属性
<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不⽀持这个属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。