如何使锚标签滚动而不被位置覆盖：固定区域答案

【问题标题】：how to make anchor tags scroll without being covered by position: fixed area如何使锚标签滚动而不被位置覆盖：固定区域
【发布时间】：2020-08-19 08:10:32
【问题描述】：

我有一个顶部带有标题的页面：位置固定，因此当用户滚动时它会停留在屏幕顶部。效果很好。

在正文下方有锚标记。当您单击将您带到这些锚点之一的链接时，浏览器会在最顶部显示带有该锚点的页面。即使这是在标题下。

这是一个演示问题的简化页面：

<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 行将可见。

【问题讨论】：

这能回答你的问题吗？ offsetting an html anchor to adjust for fixed header
我不知道如何回复顶部的对话框，让我参考另一个类似的问题，也许本质上是相同的问题。 @johannchopin 对这个问题的回答对我有用，所以我接受了。

标签： html css

【解决方案1】：

已经有针对此类问题here的回复。它使用了padding-top: size; margin-top: -size;的技巧：

.body a {
  /* Adjust here the size */
  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>

【讨论】：

这对我的简化模型页面非常有效......但它不适用于我的真实页面。在我的真实页面上，内容是一堆可点击的条目——点击一个，它会产生一个弹出窗口。但是这种技术会使条目重叠，因此当您将鼠标放在一个上并单击时，浏览器会认为您实际上是在一个向下几行的位置上。也许这可以通过在每个条目上放置一个 z 顺序来解决。
哦等等，它确实有效。我只是无法使链接的目标可点击。我必须创建一个单独的标签作为链接目标。

【解决方案2】：

说明

发生这种情况是因为单击锚点时，浏览器会跳转到该锚点并将其与用户窗口的顶部对齐。它会忽略固定元素，因为固定元素不再位于文档流中。

在这种情况下，您可以使用简单的 CSS“技巧”，但这取决于标题是否保持不变。如果它发生变化，我建议使用 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 */

它实际上是在需要跳转的框/标题内添加一个额外的跨度。额外的跨度用作锚点，并与标题的高度放在负数（顶部）。

【讨论】：