ホームページ  >  記事  >  ウェブフロントエンド  >  CSSアンカーの使い方をご存知ですか?

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

王林
王林転載
2020-09-15 17:36:272322ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。