带有锚点和像素的 HTML 链接答案

【问题标题】：HTML Links with anchor and pixel带有锚点和像素的 HTML 链接
【发布时间】：2016-09-08 12:14:36
【问题描述】：

我正在寻找一个没有 javascript 的解决方案，我可以使用这样的链接：

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

这只是一个更容易理解的例子。所以我正在尝试的是，我在我的网站上有一个锚点，链接指向那个特定点 + 60px 更远。

感谢您的回答/想法

【问题讨论】：

【解决方案1】：

到目前为止，以下是我能找到的最好的方法来定位着陆位置（不使用 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 的轻微修改。优势就在那里，您无需预先填充实际容器的填充和边距。

【讨论】：

【解决方案2】：

这是不可能的。

您唯一的选择是 JavaScript 并明确链接到您想要链接到的位置（具有自己的 ID）。

【讨论】：

【解决方案3】：

锚点是不可见的吗？如果是这样，请在链接中添加一个类和以下 CSS：

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

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

【讨论】：