如何使锚标签滚动而不会被位置覆盖：固定区域
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使锚标签滚动而不会被位置覆盖：固定区域相关的知识，希望对你有一定的参考价值。
我有一个页面的标题位于顶部，位置为：fixed，因此当用户滚动时，它位于屏幕的顶部。很好。
在下面的身体中，有锚标签。当您单击将您带到这些锚点之一的链接时，浏览器将在顶部显示该锚点的页面。即使它在标题下。
这是演示问题的简化页面：
<html>
<style>
.header {
height: 20px;
position: fixed;
top: 0px;
background-color: gray;
}
.body {
overflow: auto;
margin-top: 20px;
}
</style>
<div class="header">
This is the header.
</div>
<div class="body">
<p><a href="#10">Line 10</a> <a href="#20">Line 20</a></p>
This is the body.<br/> Line 2<br/> Line 3<br/> Line 4<br/> Line 5<br/> Line 6<br/> Line 7<br/> Line 8<br/> Line 9<br/>
<a name="10" /> Line 10<br/> Line 11<br/> Line 12<br/> Line 13<br/> Line 14<br/> Line 15<br/> Line 16<br/> Line 17<br/> Line 18<br/> Line 19<br/>
<a name="20" /> Line 20<br/> Line 21<br/> Line 22<br/> Line 23<br/> Line 24<br/> Line 25<br/> Line 26<br/> Line 27<br/> Line 28<br/> Line 29<br/> Line 30<br/> Line 31<br/> Line 32<br/> Line 33<br/> Line 34<br/> Line 35<br/> Line 36<br/> Line 37<br/> Line 38<br/> Line 39<br/> Line 40<br/>
</div>
</html>单击“第10行”链接，它显示标题，在标题的正下方，第一个可见的是...第11行。
我希望它能正常工作，因此，如果您单击第10行的链接，则第10行将可见。
答案
说明
之所以这样，是因为单击锚点时，浏览器将跳至该锚点，并将其在用户窗口的顶部对齐。它忽略了固定元素，因为固定元素不再位于文档流中。
在这种情况下，您可以使用简单的CSS'trick'，但这取决于标题是否保持不变。如果更改，我建议使用javascript或在需要时使用媒体查询来调整标头校正。
仅CSS
我在JSFiddle中做了一个例子：JSFiddle example
HTML代码：
<div class="header">
This is the header.
</div>
<div class="content">
<p>
<a href="#anchor_a">Anchor A</a>
<a href="#anchor_b">Anchor B</a>
</p>
<div class="example-box">
<h3 class="example-box_header">
<span id="anchor_a" class="example-box_id"></span>
Header 1
</h3>
<p>Some long list here</p>
</div>
<div class="example-box">
<h3 class="example-box_header">
<span id="anchor_b" class="example-box_id"></span>
Header 2
</h3>
<p>Some long list here</p>
</div>
</div>
CSS代码：
.header {
height: 20px;
position: fixed;
top: 0px;
background-color: gray;
}
.content {
margin-top: 20px;
}
/* Just example code: */
.example-box {
height: 100vh;
margin: 1vw 0;
background-color: #d1d1d1;
}
.example-box_header {
position: relative; /* This is needed, otherwise the anchor would not be relative to the header */
}
.example-box_id {
width: 1px; /* 1 */
height: 1px; /* 1 */
display: block;
position: absolute;
visibility: visible; /* 1 */
top: -20px; /* Header height compensation */
}
/* [1] To make sure to visually hide the anchor */
它实际上是在需要跳转到的框/标题内添加一个额外的跨度。该多余的跨度用作锚点，并与页眉的高度负向放置（顶部）。
另一答案
已经对此类型的问题here做出了回应。它使用padding-top: size; margin-top: -size;的把戏：
.body a {
padding-top: 20px;
margin-top: -20px;
}<html>
<style>
.header {
height: 20px;
position: fixed;
top: 0px;
background-color: gray;
}
.body {
overflow: auto;
margin-top: 20px;
}
</style>
<div class="header">
This is the header.
</div>
<div class="body">
<p><a href="#10">Line 10</a> <a href="#20">Line 20</a></p>
This is the body.<br/> Line 2<br/> Line 3<br/> Line 4<br/> Line 5<br/> Line 6<br/> Line 7<br/> Line 8<br/> Line 9<br/>
<a name="10" /> Line 10<br/> Line 11<br/> Line 12<br/> Line 13<br/> Line 14<br/> Line 15<br/> Line 16<br/> Line 17<br/> Line 18<br/> Line 19<br/>
<a name="20" /> Line 20<br/> Line 21<br/> Line 22<br/> Line 23<br/> Line 24<br/> Line 25<br/> Line 26<br/> Line 27<br/> Line 28<br/> Line 29<br/> Line 30<br/> Line 31<br/> Line 32<br/> Line 33<br/> Line 34<br/> Line 35<br/> Line 36<br/> Line 37<br/> Line 38<br/> Line 39<br/> Line 40<br/>
</div>
</html>以上是关于如何使锚标签滚动而不会被位置覆盖：固定区域的主要内容，如果未能解决你的问题，请参考以下文章