Question

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

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

但我的想法是，我需要以像素为单位超过该锚点，例如：

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

我一直在想这个，不知道怎么做。提前感谢任何输入。

Answer 1

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

#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

Answer 2

至少，我不知道如何避免使用脚本语言。这是一个简单的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变量设置为您想要偏移的像素数。在锚点上方使用正值，在其下方使用负值。

HTML锚点，但在锚点处不精确

2 个答案: