5

少し「大きな」問題があり、解決方法がわかりません。

margin-top を持つ要素にジャンプするアンカーを含むリンクがある場合、次の例のようにマージンは「無視」されます。

http://jsfiddle.net/T38uk/

margin-top="0" の div があり、いくつかの margin-top が動的に追加される場合、アンカーは次の例のように「古い」位置にジャンプします。

http://jsfiddle.net/eG2Gd/

ターゲット要素に動的に変更されたマージンがあることをアンカーに伝えることは可能ですか?

単一のコード スニペットを次に示します。

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

});

ご協力ありがとうございました。

4

2 に答える 2

1

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/

于 2012-11-20T15:06:24.793 に答える
0

div にリンクしていて、マージンが div の上のスペースだけであるため、アンカーが div のマージンの上部を指すようにすることはできません。Blazemongerが提案したようなことをする必要があるか、リンクしたい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/

于 2012-11-20T15:15:11.483 に答える