1ページのみのウェブサイトを作成したいのですがナビゲーションバーは設定したいと考えております。そのうえで、ナビゲーションバーの各メニューはアンカーリンクで同一ページ内の各項目に飛ばしたいのですが、ナビゲーションバーのメニューへのアンカーリンク設定方法がわかりません。ご教示頂けますと幸いです。
ナビゲーションバーの項目は、どのようなUIで管理されていますでしょうか?
下記キャプチャのようなUIであれば、各項目の「アクション」より「URLリンク」を選択し、テキストボックスに「#」とアンカーリンク先のid属性値を入力する形になります。
キャプチャ: HubSpotのメニューコンテンツの編集画面にて、アンカーリンクを設定する方法。各項目の「アクション」より「URLリンク」を選択し、テキストボックスに「#about」と入力している様子
@assi assialiholic2@ご回答頂きましてありがとうございます。ご教示頂いた方法にて設定してみたのですが、ナビゲーションバーの項目をクリックするとアンカーリンク先には飛ば404 Page not foundになってしまいます。考えうる要因がもしありましたら教えて頂けますと幸いです。
@Msanuotei なるほどです、現象としては最終的に出力されるHTMLがページ内リンクではなく他ページへのリンクとなってしまっているのだと思います。
ナビゲーションバーの項目のURLの設定のキャプチャと、ページに実際に出力されているリンクのaタグのソースコードをご共有いただければトラブルシューティングを進められるのですが、ご共有いただくことは可能でしょうか?
@Msanuotei お返事遅くなりすみません。
ナビゲーションバーの設定と遷移先のid属性の設定は問題無さそうですね。
現象が起きているページの、実際に出力されているナビゲーションバーのaタグの中身はどのようになっていますでしょうか?ドメイン部分は伏せていただいて構いませんので、ページのパスも確認できますと確実です。
(404になってしまうとなると、aタグのリンクが同一パスを指し示していない可能性があります)
キャプチャとして、以下のようなものを頂けましたら再度トラブルシューティングを進めることが可能です。
キャプチャ:Google Chromeの開発者ツールを用いて、ページのURLとアンカーリンクが設定されているaタグのソースコードをハイライトしている様子



