偏移内部页面#link从页面顶部开始按X像素排列

Question

我的网站上有一个静态顶级菜单栏，高度为50像素。如果有人直接访问此地址：

http://example.com/page.html#somelink

当菜单覆盖它时，位置太高了50px。

有没有办法让它以#something结尾的任何链接从顶部偏移50个像素？

Answer 1

我们通过添加一个空锚来实现这一点，该锚通过CSS定位为绝对位置，顶部可以抵消菜单高度。

这种小提琴显示它：http://jsfiddle.net/R67L5/

标记：

<div class="spacer"></div>
<a name="heading" class="jump-to"></a>
<h1>Hello</h1>
<div class="spacer"></div>
<a href="#heading">Jump To Heading</a>

和CSS：

div.spacer {
    height: 70px;
}

a.jump-to[name] {
    position: absolute;
    top: -70px;
}