HTML锚，但在定位点不准确

当我想引用的“http://example.com/#foo” - 方法网页的某一部分，我做的：HTML锚，但在定位点不准确

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

但这个想法是我需要去以上或超过锚在像素一段距离，例如：

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

我一直在想着这一夜，也没有任何想法如何做到这一点。预先感谢您的任何意见。

来源

2014-09-26 ngungo

JS是一个可以接受的选择吗？ – Mooseman 2014-09-26 19:35:23

我宁愿不，但如果我必须这样做。 – ngungo 2014-09-26 19:40:16

我发布了一个使用jQuery的答案。如果你想要一个香草味的解决方案，让我知道。 – Mooseman 2014-09-26 19:49:28

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

#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

来源

2014-09-26 19:50:42 isherwood

小提琴更新以更好地演示效果并使用100px偏移量。 – isherwood 2014-09-26 19:56:02

我喜欢这个主意。看来“边缘底部”是不需要的。我很慢，需要一些时间来咀嚼它。：）谢谢！ – ngungo 2014-09-26 20:11:03

需要底部边距来保留其他元素的布局位置。 – isherwood 2014-09-26 20:11:45

有没有避免使用脚本语言，至少，不是我所知道的。这里有一个简单的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变量给你多少像素希望被抵消。在锚点上方使用正值，在下面使用负值。

来源

2014-09-26 19:41:13

HTML锚，但在定位点不准确

回答

相关问题