1

<div id='pageheader'>次の CSS を使用すると、次のようになります。

#pageheader { position: fixed; top: 0px; width: 100%; height: 35px; }
body { margin-top: 35px; }

ページの上部に固定されたままのヘッダーがあります。問題は、ユーザーが同じページの別の部分へのリンクをクリックすると、リンクのターゲットがヘッダーの下に表示されることです。これを防ぐ方法がわかりません。

編集: JQuery を使用して内部リンクをスムーズにスクロールし、この問題を解消しました。

$("span.sect1, span.sect2").click(function(){
    var target = '#' + $(this).find("a").attr('href').match(/#(.*)$/)[1];       
    var position = $(target).offset();
    $('html, body').animate({scrollTop: (position.top -40)}, "slow");
});
$("a.xref").click(function(){
    var target = '#' + $(this).attr('href').match(/#(.*)$/)[1];     
    var position = $(target).offset();
    $('html, body').animate({scrollTop: (position.top -40)}, "slow");
});
4

1 に答える 1

0

以前はどこにいた可能性がありますか:

<h1 id="target">Get here with #target</h1>

これを試して：

<h1><a id="target" style="position: relative; top: -35px;"></a>Get here with #target</h1>
于 2012-04-06T13:40:09.127 に答える