アンカーはページの先頭にはならないが、200ピクセル下になる

Question

ナビゲーションにそのポイントにジャンプする要素にアンカーがある。ただし、アンカーはビューポートの上部までスナップします。固定されたナビゲーションをするので、今は隠れている。

アンカーをビューポートの上部にスナップするのではなく、代わりにページを200ピクセル下にすることはできますか？ここ

サイト：http://www.haselden.co.uk/james/docs

Answer 1

これは汚い解決策ですが、私は調整を追加しましたが、これを考えて@SteveJenkinsさんに感謝します。

<a name="AnchorName" class="anchor">anchor text [invisible]</a> 

.anchor { 
    position: relative; 
    top: -[number]px; 
    visibility:hidden; 
} 

Answer 2

200pxの下秘伝の要素を追加し、代わりにそれにアンカーを作ります。

Answer 3

実際にCSSをアンカーに適用することでこれを解決できました。だから私はアンカーがどのくらい離れているかにいくつかの誤りに気づいた私は、この...

<a name="AnchorName" class="anchor"></a> 

を持っているでしょう。そしてCSSで私はこれを持っているでしょうアンカー...

.anchor { 
    position: relative; 
    top: -[number]px; 
} 

注異なるブラウザで移動しました。だから、物事を完全に一致させることは不可能かもしれません。あなたはそれが完全に配置されることを望むなら、おそらくいくつかの素晴らしいjqueryまたは何かを必要とするでしょう。

Answer 4

私にも同様の問題があり、この問題が発生しました。私が望んでいたような答えは全くありませんでした。私はもう少し行く必要があり、私の発見を分かち合いたいと思っていました。

最初に文脈のビット。面白い部分をハイライト表示して何らかのエラー解析をして、HTMLでレンダリングされたソースコードの表示ページにしていました。固定された高さ可変ヘッダーにある迅速なナビゲーションを可能にする索引テーブルがあります。なぜ私はこの質問ページに巻き込まれたのかを説明します。

私の問題は、アンカーがアンカーの長さでテキストをシフトし、コードの書式設定をいじり、周りソースコードを移動し、ビジュアルスペースとを取っていたということでした。私はスペースを取らないようにするために複数の方法を試みましたが、アンカーが動作するようにページにはまだ存在しています。結局、.（@ noregtのコメントによると）の代わりに、私はのために解決しました。これはバックスペース文字になります。

各アンカーは<a name="[some unique name]" class="anchor">&#008;</a>のように動的に生成され、固定ヘッダーで参照されます。ジャバスクリプトの

少し（すべてのアンカーをつかみ、動的トップパディングを調整する）動的ヘッダの高さとアンカーの位置決めに役立つ：

<script type="text/javascript"><!-- 
var height = document.getElementById("head").offsetHeight; 
var a = document.getElementsByClassName('anchor'); 
// src: http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript 
for(key in a) { 
    if (a.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) { 
     a[key].style.paddingTop = height + 'px'; 
    } 
} 
--></script> 

このソリューションは、可変高さで動的に生成アンカーのために完璧に動作します固定ヘッダーです。これが他の人を助けることができるといいですね。

Answer 5

これはCSS3の方がずっと簡単です。長い説明はここにあります：https://css-tricks.com/hash-tag-links-padding/ですが、短いバージョンは