web-dev-qa-db-ja.com

同じページのセクションにリンクする方法は?

同じページにリンクするリンクを持つメニュー項目を作成する方法(さらに下にスクロールするなど)?

例: http://eshbeata.com/ 、「Work」または「About」をクリックすると、同じページが下にスクロールします。

1
drupalmav

これは、Drupalのものではなく、HTMLリンクのものです。

これらのリンクの1つをクリックすると、URLを見るとわかるように、リンクは次のようになっています。

http://eshbeata.com/#about 

または

http://eshbeata.com/#works

末尾のハッシュタグとWordに注意してください(#aboutと#works)。

これは「アンカー」と呼ばれ、基本的にはページへのリンクではなく、特定のページの一部へのリンクです。

アンカーを使用するには、2つの部分からなるセットアップが必要です。

  • まず、ジャンプしたい場所にリンクでラベルを付ける必要があります。したがって、「作品」セクションであるページの正確な場所によって、そのページの作成者は次のようになります。

    <a href="#" name="works"></a>
    

これは、ページ内のこの場所に「works」という名前を付ける空のリンクであり、それがまさに以下のリンクが探すものです

  • 次に、トップメニューの[Work]リンクで、リンクの末尾にアンカー「#works」があります。

    <a href="#works">Work</a>
    

お役に立てれば。 「htmlアンカー」または類似の用語のようなものを検索するだけで、このオンラインに関する詳細を読むことができます。

1

私のような初心者のために少しの修正を提案します。段落タグとともにアンカータグを配置します。アンカーが作成されます。

これで、このアンカーを別のページからリンクすることもできます。へのリンクなど:example.com/node/3/#works

0
A Agarwal