- 我們在瀏覽網(wǎng)站時(shí)，經(jīng)常會(huì)看到返回頂部和樓層跳轉(zhuǎn)的效果，但是這些大部分都是通過js來實(shí)現(xiàn)的。如何直接使用css實(shí)現(xiàn)
<!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寫了一個(gè)scroll-behavior: smooth，也正是因?yàn)檫@個(gè)屬性，才使得錨點(diǎn)跳轉(zhuǎn)有過渡效果。
可以說對(duì)于不懂js的小伙伴來說，這個(gè)屬性簡直就是好用到爆，而且過渡的流暢度還挺好的。
語法：scroll-behavior有兩個(gè)屬性值，默認(rèn)auto
auto:滾動(dòng)框立即滾動(dòng)
smooth:實(shí)現(xiàn)平穩(wěn)的滾動(dòng)
