使用锚标记链接到 id ，但带有偏移量

【问题标题】：using an anchor tag to link to an id , but with an offset使用锚标记链接到 id ，但带有偏移量
【发布时间】：2023-01-12 03:52:19
【问题描述】：

当使用锚标记转到我页面上的特定 id 时，我遇到了一个问题，当我单击链接时，文本隐藏在我的导航栏后面。我不能只添加更多的填充或边距，因为它会破坏我的设计。有没有办法实现某种形式的抵消？

<a href="#text"></a>

<h1 id="text">Text</h1>

【问题讨论】：

标签： html css

【解决方案1】：

花点时间自己找到解决方案。从 CSS 到 JS 有无数种选择，但您可以尝试以下几种。

最简单的解决方案：

#text {
   padding-top: 50px; /*height of your navbar*/
   margin-top: -50px;
}

另一种解决方案，取自here，@LGT：

html {
  height: calc(100vh - 84px); /* Fix the height. The 84px here is the height of your nav. */
  margin-top: 84px;
  overflow: hidden; /* Don't scroll. */
}

body {
  height: 100%; /* Set the height to that of html. */
  overflow-y: auto; /* Draw a vertical scrollbar when needed. */
}

另一个解决方案：

#text:target {
    padding-top: 50px; /*height of your navbar*/
} 
/*:taget pseudo class is used when user accesses the selected tag using href*/

【讨论】：