SIMグローバルナビゲーションのメニューが複数あるときのページ内リンクの書き方を紹介します。
ページ内リンクには「id」を使いますが、このときに「id」の使い方を間違えるとページ内リンクが機能しなくなるので、その辺の注意事項もいっしょに紹介します。
結論ザックリ
SIM最初に結論として、正解のコードを紹介しておきます。
下記CodePenで紹介するのでコードと動作を確認してみて下さい。
下の例では同じメニューが２つあり、メニューをクリックすると、各見出し（h2タグ）に飛ぶようなページ内リンクを付けています。
実案件では、ヘッダーグローバルナビゲーションをPC用とスマホ用で別々に作っている場合や、フッターにも同じ内容のグローバルナビゲーションがある場合が該当します。
See the Pen Link within page id by Satoru Shimizu (@sat-simizu) on CodePen.
このときに、見出し（h2タグ）につけたidを複数のグローバルナビゲーションで使い回すと、ページ内リンクが機能しなくなります。
当然、一つのタグ（今回はh2タグ）に、複数のidを付けることもできません。
SIMでは、その解決方法について解説していきます。
回答：複数のidを付けたいときは、別のタグを付け加える
SIM解決法はシンプルで、ページ内リンク先のタグの直近に別のタグを付け加えて、そこに別のidを付ければOKです。
下に実際のコードを書いておくけど、今回ケースでは「空の<span>タグ」をページ内リンク先のh2タグ直上に付け加えて、その「空の<span>タグ」の中に新たに別のid（メニュー２専用）を付けています。
<!-- 見出し -->
<!-- メニュー２専用のid -->
<span id="sec2-02"></span>
<!-- メニュー1専用のid -->
<h2 id="sec1-02">サービス</h2>補足１：固定ヘッダーがある場合の位置調整
固定ヘッダーがある場合、移動先の見出しが固定ヘッダーの影に隠れてしまいます。その対処法としては様々なものがあります。
その中で良く使われるCSSだけで解決する方法は、移動先リンクのタグに下記のようなネガティブマージンでPaddingの相殺です。
id="sec2-02 {
display: block;
padding-top: 150px;
margin-top: -150px;
}補足２: 固定ヘッダーがある場合の位置調整
上の方法の他にHTMLだけで解決する方法もご紹介します。
見出しの親であるsectionタグの直上に移動先idを含むspanタグを配置すると親sectionのpadding-top効果により移動先がちょうど良い位置になることが多いです。
この方法であれば、sectionタグ直上に複数のspanタグを配置することでそのまま複数のidを利用することができます。
ただし、sectionに固定ヘッダーに隠れない大きさのpadding-topが設定されているという大前提があってこそ成立する方法ですのでご注意下さい。
まとめ
SIMまとめると、ページ内リンク用のidを複数使いたい時は、空のタグを利用して、その中に専用idを付ければ解決ということ。
以上、簡単ですが、ページ内リンクで複数のidを使いたい時の対処法でした。
