链接：跳转到ID - 100px

Question

我的网站顶部有一个带有修复位置的导航，这意味着即使滚动它也始终保持在顶部。

现在我有一个锚：

<a href="#someID">Jump to 'something'</a>
<div id="someID">...</div>

问题是：它跳转到页面上的ID，但现在它已被导航覆盖。

有没有办法跳转到网站上的特定位置并跳回几个像素，以免被导航覆盖？

我想，使用JavaScript是可能的。有没有办法没有它呢？

Answer 1

你可以通过引入一个内部元素来解决这个问题，该内部元素设置在你想要跳转到的元素上方100px：

<div>
    <span id="someID"></span>
</div>

使用以下CSS：

div {
    overflow: hidden;
    position: relative;
}

div span {
    position: absolute;
    top: -100px;
    visibility: hidden;
}

JSFiddle demo