Question

首先，我正在努力解决如何标题问题。我知道它会更好。

所以在我简单的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

Answer 1

感谢this answer，我解决了问题

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

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

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

从页面顶部显示带有空格的HTML书签链接

1 个答案: