Target Internal Link Of Another Page On Website

Question

In the Edit Menus page, you can select an internal page to link, or an external page.

I am building a giant single page where the hyperlinks target internal page headings, for example I have one of my menu elements set to #one that targets <a name="one"></a>on my homepage.

This is all ok whilst the user is on the giant single page. However I will have the last link to the blog. When on the blog I want the user still to be able to click these hyperlinks in the navigation.

I need a way of programming into the menu the following:

internal page id=x #one

If that makes sense? The link has to go to the giant single page and target the section.

In pure html this is what I am looking for:

<a href="www.mywebsite.com/giant-single-page#one">

The most obvious answer is for me to program these absolute links in, but I'd rather not do this. Is there a way to combine the internal links in the menu with section names?

I have full control of the theme and I can program, so please present to me any solution.

Answer 1

Through some trial and error I found the solution. It's far simpler than I thought.

For example, because my page is the homepage, I use this as my link in the menu:

/#one

As opposed to:

#one

And it works. It doesn't matter what page I am on, once I click that link it takes me to the correct page and then to the correct section.

If you want to target the section of another page, just do the following:

/?page_id=21#four

Of course, this doesn't let you have the flexibility of selecting the page name in the menu customisation page, so you have to know the pages ID for this to work.