inline 元素绑定id 且加padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: fixed;
height: 50px;
background-color: #fff;
top: 0;
left: 0;
width: 100%;
}
div>a {
font-size: 20px;
padding: 0 10px;
}
h2 {
height: 1000px;
background-color: #ec9066;
}
h2:nth-of-type(1) {
margin-top: 50px;
}
h2:nth-of-type(2) {
background-color: #ddd44f;
}
h2:nth-of-type(3) {
background-color: #9bec58;
}
h2:nth-of-type(4) {
background-color: #69e2f1;
}
h2>span {
padding-top: 50px; // 代码
}
</style>
</head>
<body>
<div>
<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>
<a href="#d">d</a>
</div>
<h2><span id="a">1</span></h2>
<h2><span id="b">2</span></h2>
<h2><span id="c">3</span></h2>
<h2><span id="d">4</span></h2>
</body>
</html>
2. 或者直接用 scroll-padding-top
<style>
html {
scroll-padding-top: 50px;
}
</style>