2

いくつかのブログアイテムを含むページがあります。アイテムの前にはアンカーが付いており、。を使用してアイテムに直接リンクすることもあります#my-item。

問題は、上部に固定メニューがあり、アンカーリンクがブラウザの上部を抱き締めているため、そのメニューがタイトルをカバーするようになったことです。

これを押し下げることは可能ですか（たとえば100px）？私はjQueryの方法を考えることができますが、click()私が言ったように、時々私は別のページから来ます。

4

6 に答える 6

4

ターゲットに負のトップマージンを追加し、同じ量のトップパディングで補正することで、アンカージャンプの動作を変更できます。ブラウザはクリックすると負のマージンの位置にジャンプしますが、ターゲットの間隔は正しいままです。

これがjsfiddleの例です

CSS

article {
    display: block;
    margin-top: -50px;
    padding-top: 50px;
}
于 2013-01-31T14:49:40.093 に答える
1

これは古いスレッドですが、まだ検索結果に表示されているため、現在のCSSは、scroll-margin-top2021年の時点で広くサポートされているその目的のためのプロパティを提供していることに注意してください。

#my-item { scroll-margin-top: 100px; }

余白やパディングをいじらずにアイテムを押し下げます。

于 2021-12-10T11:22:26.950 に答える
0

要素にパディングを追加してみませんか？

<h3 style="padding-top: 100px;">The subheading</h3>

ビューポートが要素の上端に一致し、要素のコンテンツと境界線の間に100ピクセルのスペースができるまで、ブラウザは下にスクロールします。

于 2013-01-31T14:30:53.393 に答える
0

最も簡単な方法は、コンテンツの上部にマージンまたはパディングを追加することです。このHTMLを検討してください。

<a name="post1234"></a>
<article>
  Lorem ipsum...
</article>

#post1234ハッシュがリンクを指すと、画面の上部に配置されます。したがって、記事の上部にパディング/マージンを追加するだけです。

article { padding-top: 100px; }
于 2013-01-31T14:31:50.413 に答える
0

解決：

あなたにパディングを追加しますa

a.anchor{
    position: relative;
    padding-top: 100px;
    width:1px;
    display: block;
}

どうも

于 2013-01-31T14:35:11.623 に答える
0

ページ上のすべてのアンカーのジャンプターゲットをどのようにプッシュダウンするかを知りたい場合は、次のようにします。

/* all anchors and all elements with the anchor class */
a, .anchor { margin-top: -2em; padding-top: 2em; }

/* all anchors with an href attribute */
a[href] { margin-top:0; padding-top: 0; }

margin-top:unset;代わりに使用することもできますmargin-top:0;

あなたが本当に危険を感じているなら、あなたはおそらく*[id]これを使って、IDを持つすべてのものに適用することができます。しかし、私はおそらくそれをしません。知らない。試してみます。ワイルドサイドを歩け。

ここでの他の回答には表示設定が含まれているようですが、それがどのように必要または役立つかわかりません。

于 2015-11-15T00:53:31.613 に答える