说目标元素获得动态边距顶部的“锚链接”答案

【问题标题】：Say "Anchorlink" that Target Element got dynamic margin-top说目标元素获得动态边距顶部的“锚链接”
【发布时间】：2012-11-08 15:52:22
【问题描述】：

我有一个“大”问题，不知道如何解决。

如果我有一个带有锚点的链接，该锚点跳转到具有顶部边距的元素，则边距将被“忽略”，如下例所示：

http://jsfiddle.net/T38uk/

如果我有一个 margin-top="0" 的 div 并且会动态添加一些 margin-top，则锚点会跳转到“旧”位置，如下例所示：

http://jsfiddle.net/eG2Gd/

是否可以告诉锚点目标元素上存在动态变化的边距？

这里是单码sn-ps：

HTML

<a href="#testanchor" class="link">Testanchor</a>
<div id="zwischenelement"></div>
<div id="testanchor">Hier muss der Anker hinspringen</div>

CSS

body {
   height: 8000px;        
}

.link {
   display: block;
}

#zwischenelement {
   height: 200px;
   background-color: grey;    
}

#testanchor {
   margin-top: 40px;  
   background-color: red;
   padding:15px;   
}

JS（包含“scrollAnimate”jQuery 插件）

$(document).ready(function() {

$('#testanchor').scrollAnimate({
    startScroll: 0,
    endScroll: 100,
    cssProperty: 'margin-top',
    before: 0,
    after: 40
});

});

感谢您的帮助。

【问题讨论】：

标签： jquery html css anchor margin

【解决方案1】：

一种解决方案是用滚动到元素当前位置的 jQuery 函数替换正常的链接点击操作，加上您希望它向下移动的像素数：

$('a[href^=#]').on('click',function(e) {
    e.preventDefault();
    $(document).scrollTop($('#testanchor').position().top+40); 
    // 40 pixels is specific to this case
});

http://jsfiddle.net/mblase75/eG2Gd/2/

【讨论】：

【解决方案2】：

您将无法让锚点指向 div 的边距顶部，因为它链接到 div 并且边距只是 div 上方的间距。要么您需要执行 Blazemonger 建议的操作，要么围绕您要链接的 div 创建一个 div 并链接到该 div。

例如：

<a href="#testAnchorHolder" class="link">Testanchor</a>
<div id="zwischenelement"></div>
<div id="testAnchorHolder">
    <div id="testanchor">Hier muss der Anker hinspringen</div>
</div>

和 CSS：

#testAnchorHolder {
    padding-top: 40px;
}
#testanchor { 
    background-color: red;
    padding:15px;   
}

http://jsfiddle.net/FchLX/

【讨论】：

感谢您的回答，但这不是我的问题 ;) 我不想转到页边距的顶部...我想直接转到 div 但如果添加了一些页边距通过javascript，锚只知道“旧位置”，不会跳到div的顶部。
啊，在这种情况下，您将不得不使用 javascript 来设置滚动位置，因为在呈现页面后会移动 div。实际上，浏览器将您置于正确的位置，然后您正在移动 div。