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錨，但在定位點不準確

回答

相關問題