从页面顶部显示带有空格的 HTML 书签链接 [重复]答案

【问题标题】：Show HTML bookmark link with space from top of the page [duplicate]从页面顶部显示带有空格的 HTML 书签链接 [重复]
【发布时间】：2016-08-26 10:33:13
【问题描述】：

首先，我正在努力为我的问题命名。我知道它可以做得更好。

所以在我的简单 HTML 页面中，我有 3 个书签，我通过 <a> 标签链接它们：

<a href="#section1">HTML5</a>

我在页面顶部有一个固定的标题，并且我已将margin-top 设置为这些部分，以便它们出现在标题下方。

header {
    width: 100%;
    height: 200px;
    position: fixed;
    top: 0px;
}
section {
    padding: 20px;
    margin-right: 200px;
    margin-top: 200px;
}

现在的问题是，当我单击书签链接时，HTML 会尝试滚动到它们并在页面顶部显示它们，然后它们会被标题所掩盖。

我的问题是，有没有办法告诉<a> 标签使用一些边距显示书签，以便它出现在标题下方？

JSFiddle sample

【问题讨论】：

@Ardian 是的，你是对的。我可以通过应用padding-top: 220px 来修复它。 jsFiddle：jsfiddle.net/azizn/yxsq3uk1 投票关闭为重复

标签： html css

【解决方案1】：

感谢this answer，我解决了这个问题

/* 将 class="jumptarget" 添加到所有目标。 */

我改变了对我有利的答案，它像一个魅力一样解决了这个问题。

.jumptarget::before {
  content:"";
  display:block;
  height:220px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

【讨论】：