ナビゲーションバーへのアンカーリンク設定方法

[Msanuotei]

1ページのみのウェブサイトを作成したいのですがナビゲーションバーは設定したいと考えております。そのうえで、ナビゲーションバーの各メニューはアンカーリンクで同一ページ内の各項目に飛ばしたいのですが、ナビゲーションバーのメニューへのアンカーリンク設定方法がわかりません。ご教示頂けますと幸いです。

[Msanuotei]

@assi assialiholic2＠ご回答頂きましてありがとうございます。ご教示頂いた方法にて設定してみたのですが、ナビゲーションバーの項目をクリックするとアンカーリンク先には飛ば404 Page not foundになってしまいます。考えうる要因がもしありましたら教えて頂けますと幸いです。

[assi]

@Msanuotei なるほどです、現象としては最終的に出力されるHTMLがページ内リンクではなく他ページへのリンクとなってしまっているのだと思います。

ナビゲーションバーの項目のURLの設定のキャプチャと、ページに実際に出力されているリンクのaタグのソースコードをご共有いただければトラブルシューティングを進められるのですが、ご共有いただくことは可能でしょうか？

[Msanuotei]

@assi ご確認頂きましてありがとうございます。URL設定とソースコードのキャプチャを添付させていただきます。他に必要な点などありましたらお知らせ頂けますと幸いです。

[assi]

@Msanuotei お返事遅くなりすみません。

ナビゲーションバーの設定と遷移先のid属性の設定は問題無さそうですね。

現象が起きているページの、実際に出力されているナビゲーションバーのaタグの中身はどのようになっていますでしょうか？ドメイン部分は伏せていただいて構いませんので、ページのパスも確認できますと確実です。

（404になってしまうとなると、aタグのリンクが同一パスを指し示していない可能性があります）

キャプチャとして、以下のようなものを頂けましたら再度トラブルシューティングを進めることが可能です。

キャプチャ：Google Chromeの開発者ツールを用いて、ページのURLとアンカーリンクが設定されているaタグのソースコードをハイライトしている様子

[assi]

@Msanuotei 

ナビゲーションバーの項目は、どのようなUIで管理されていますでしょうか？

下記キャプチャのようなUIであれば、各項目の「アクション」より「URLリンク」を選択し、テキストボックスに「#」とアンカーリンク先のid属性値を入力する形になります。

キャプチャ: HubSpotのメニューコンテンツの編集画面にて、アンカーリンクを設定する方法。各項目の「アクション」より「URLリンク」を選択し、テキストボックスに「#about」と入力している様子