jquery - 说 "Anchorlink"Target Element 有动态 margin-top

Question

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

如果我有一个带有跳转到带有 margin-top 元素的 anchor 的链接，则边距将被“忽略”，如下例所示:

http://jsfiddle.net/T38uk/

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

http://jsfiddle.net/eG2Gd/

是否可以告诉 anchor 目标元素上有一个动态变化的边距？

这是单个代码片段:

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
});

});

感谢您的帮助。

Answer 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/