HTML锚点，但不是精确的锚点
当我想用“http://example.com/#foo"-method”来引用网页的某个部分时，我会这样做：
<h1 id="foo">Foo Title</h1>
但是我的想法是我需要以像素为单位在距离之上或之上超出距离，例如：
"http://example.com/#foo-100px"
or
"http://example.com/#foo+100px"
我一直在想这个问题，不知道该怎么做。 预先感谢您的任何意见。
如果您可以使用单独的锚点而不是标题作为链接目标，则可以使用负边距来完成此操作，而不会影响布局的其余部分。
#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>
演示
至少，我没有避免使用脚本语言来做这件事。 这里有一个简单的jQuery解决方案：http://code-tricks.com/offset-scroll-to-anchor-tag-with-jquery/
$(function(){
$("[href^='#']").not("[href~='#']").click(function(evt){
evt.preventDefault();
var obj = $(this),
getHref = obj.attr("href").split("#")[1],
offsetSize = 145;
$(window).scrollTop($("[name*='"+getHref+"']").offset().top - offsetSize);
});
});
JSFiddle：http://jsfiddle.net/vg0x45gy/
将offsetSize变量设置为您希望偏移的像素数。 在锚点上方使用正值，在下面使用负值。