HTML锚点，但锚点不精确。
HTML锚点，但锚点不精确。
提问于 2014-09-26 19:32:54
当我想使用"http://example.com/#foo"-method引用网页的某个部分时，我会这样做：
<h1 id="foo">Foo Title</h1>但我的想法是，我需要以像素为单位，超过或超过这个锚点，例如：
"http://example.com/#foo-100px"
or
"http://example.com/#foo+100px"我一夜之间就在想这件事，还不知道该怎么做。谢谢您提供的任何信息。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-26 19:50:42
如果您可以使用一个单独的锚，而不是您的标题作为链接目标，您可以使用负边距来完成这一点，而不影响您的布局的其余部分。
#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
Stack Overflow用户
发布于 2014-09-26 19:41:13
至少，据我所知，在这方面没有避免使用脚本语言。下面是一个简单的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变量设置为要偏移它的像素数。在锚点上方使用一个正值，对它下面使用一个负值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26067031
复制相关文章
相似问题
腾讯云开发者
