HTML 带锚点和像素的链接

Question

我正在寻找没有 javascript 的解决方案，我可以在其中使用 link，如下所示：

<a href='#link1 +60px'>

这只是一个例子，以便于理解。所以我正在尝试的是，我在我的网站上有一个锚点，并且 link 进一步到达那个特定点 + 60px。

Answer 1

这是不可能的。

您唯一的选择是 JavaScript 和 link 明确地指向您想要 link 到的位置上方的位置（具有自己的 ID）。

Answer 2

到目前为止，以下是我能找到的定位着陆位置的最佳方法w/o javascript

HTML（添加额外的锚标签）

 <!-- Actual going to here -->
 <a id="anchorpoint" class="anchor"></a>
 <!-- Display point -->
 <div>Some content here</div>

CSS

.anchor {
    display:block;
    padding-top:60px;
    margin-top:-60px;
 }

这是对 Fixed position navbar obscures anchors 的轻微修改。优势在于，您无需预先填充实际容器的填充和边距。

Answer 3

锚点是看不见的吗？如果是这样，在link和下面的CSS中添加一个class：

a.link {
   position:relative;
   top:60px;
}

<a class="link" href='#link1'>

HTML Links with anchor and pixel