CSSアンカーの使い方をご存知ですか？-CSSチュートリアル-php.cn

CSSアンカーの使い方をご存知ですか？

王林

リリース： 2020-09-15 17:36:27

転載

2339 人が閲覧しました

CSSアンカーの使い方をご存知ですか？

CSS アンカーを使用するには 2 つの方法があります。次の方法を使用することをお勧めします:

(推奨チュートリアル: CSS チュートリアル)

<a href=&#39;#one&#39;>到达第一个锚点</a>
    <a href=&#39;#two&#39;>到达第二个锚点</a>
    <div id=&#39;one&#39;>我是第一个锚点</div>
    <div id=&#39;two&#39;>我是第一个锚点</div>

ログイン後にコピー

したがって、リンク A をクリックすると、対応する DOM ノードがウィンドウの上部までスクロールします。

しかし、ウィンドウの上部までスクロールさせたくない場合もあります。彼に頂上から少し離れたところにいることが望ましいかもしれません。これは以下の方法で解決できます。

<a href=&#39;#one&#39;>到达第一个锚点</a>
    <a href=&#39;#two&#39;>到达第二个锚点</a>
    <div id=&#39;one&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
    <div >我是第一个需要滚动的内容</div>
   <div id=&#39;two&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
    <div >我是第二个需要滚动的内容</div>

ログイン後にコピー

これにより、スクロール後に上から 200px の効果が得られます。元のページのスタイルに影響を与えることなく。

以上がCSSアンカーの使い方をご存知ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。