css - ページの上部ではなく、200 ピクセル下にアンカーします

Question

ナビゲーションをそのポイントにジャンプさせる要素にアンカーがあります。ただし、アンカーはそれをビューポートの一番上までスナップします。固定ナビゲーションを行うため、現在は後ろに隠れています。

アンカーをビューポートの上部にスナップせず、代わりにページの 200px 下にスナップすることは可能ですか?

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

score 8 · Accepted Answer

実際にCSSをアンカーに適用することでこれを解決できました。だからアンカーのために私はこれを持っているでしょう...

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

そして、CSSではこれがあります...

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

ブラウザーによってアンカーの移動距離が不正確であることに注意してください。そのため、物事を完全に揃えることができない場合があります。完全に配置したい場合は、おそらく派手なjqueryなどが必要になるでしょう。

score 5 · Accepted Answer

これに対する汚い解決策ですが、機能します。これを思いついた@SteveJenkinsに感謝しますが、微調整を追加しました。

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

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

score 4 · Accepted Answer

CSS3 を使用すると、これがはるかに簡単になります。長い説明はこちら: https://css-tricks.com/hash-tag-links-padding/ですが、短いバージョンは

a::before {
    display: block;
    content: " ";
    margin-top: -70px;
    height: 70px;
    visibility: hidden;
}

score 3 · Accepted Answer

私は同様の問題を抱えていて、この質問に出くわしました。私が望んでいたように答えはありませんでした。私はもう少し先に進む必要があり、私の発見を共有したいと思いました。

最初に少しコンテキストを説明します。HTML でレンダリングされたソースコード表示ページに興味深い領域をハイライト表示する、ある種のエラー解析を行っていました。クイックナビゲーションを可能にするインデックステーブルがあり、これは固定の高さ可変ヘッダーにあります。これが、私がこの質問ページにたどり着いた理由を説明しています。

私の問題は、アンカーが視覚的なスペースを取り、ソースコードを移動し、テキストをアンカーの長さだけシフトし、コードのフォーマットをいじっていたことです。アンカーが機能するように、スペースをとらずにページに存在するようにする方法を複数試しました。最後に、.（@noregtのコメントによると）の代わりに、バックスペース文字になるものに落ち着きました。

各アンカーは動的に生成さ<a name="[some unique name]" class="anchor"></a>れ、固定ヘッダーで参照されます。

少しの Javascript は、動的なヘッダーの高さとアンカーの配置に役立ちます (すべてのアンカーを取得し、上部のパディングを動的に調整します)。

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

このソリューションは、高さが可変でヘッダーが固定されている、動的に生成されたアンカーに対して完全に機能します。これが他の誰かを助けることを願っています。

score 1 · Accepted Answer

1

200px 下に hiden 要素を追加し、代わりにアンカーを作成します。

于 2012-08-08T20:22:21.603 に答える

css - ページの上部ではなく、200 ピクセル下にアンカーします

5 に答える 5

Related

Reference