HTML anchor ，但在 anchor 不准确

Question

当我想使用“http://example.com/#foo”方法引用网页的某些部分时，我会这样做:

<h1 id="foo">Foo Title</h1>

但我的想法是我需要超出或超出该 anchor 一定距离(以像素为单位)，例如:

"http://example.com/#foo-100px" 
   or
"http://example.com/#foo+100px"

我想了一个晚上，不知道该怎么做。在此先感谢您的任何输入。

Answer 1

如果您可以使用单独的 anchor 而不是您的标题作为链接目标，则可以使用负边距来实现此目的而不会影响布局的其余部分。

#myAnchor {
    margin-top: -100px;
    margin-bottom: 100px;
    display: block;
    height: 0;
}

<p>My paragraph.</p>
<a name="myAnchor" id="myAnchor"></a>
<h1 id="myHeading">My heading</h1>

Demo