我有一个小“大”问题,不知道如何解决。
如果我有一个带有跳转到带有 margin-top 元素的 anchor 的链接,则边距将被“忽略”,如下例所示:
如果我有一个 margin-top="0"的 div,并且会动态添加一些 margin-top, anchor 会跳转到“旧”位置,如下例所示:
是否可以告诉 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
});
});
感谢您的帮助。
最佳答案
一种解决方案是用滚动到元素当前位置的 jQuery 函数替换正常的链接单击操作,加上您希望它向下移动的像素数:
$('a[href^=#]').on('click',function(e) {
e.preventDefault();
$(document).scrollTop($('#testanchor').position().top+40);
// 40 pixels is specific to this case
});
关于jquery - 说 "Anchorlink"Target Element 有动态 margin-top,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13475595/