Recently a client asked me how they could get their Joomla! menu item, when clicked, to jump down to a specific part of a page.
This is referred to as an anchor tag.
Let me show you the basic version and then the Joomla! menu item. On this ‘My jump page’, I’ve created a link here and instead of a URL, I’ve put in the hash and then the word’ Jump’. This means that when I click it, it jumps down to this part of the page, where I have another anchor with an ID of jump.
Let me show you that in the html
So anchor tag, href equals #jump and then down here on my h2, I have an anchor tag with no href, just an ID of jump.
So the browser knows that when I click here – it goes to here.
What my client wanted, was when you click a menu item (we go back to the home so you can see this properly) it jumps down to that point.
To show you, if you’re actually on the page, it does exactly the same. This is very simple but takes a little bit of thinking outside the box.
So let’s get into Joomla! and see how this is done.
In articles, we’ll just have a quick check to make sure the article is set up as I showed you.
We have a basic jump here and if we look at the link for that, you’ll see there’s no URL and the anchor we set to jump.
Further down we have this anchor here. If you need to know how to set that – insert > anchor, and that’s in there. You would set that up first, and continue to the menu item.
First of all, you do need a menu item to go to the page.
As you can see here, I have a very simple menu item – single article, and it goes to the a jump to page article.
This can be hidden if you do not want that to show to the public. Then the jump menu item – the menu item type is URL, so that means we’re going to type this ourselves manually.
We then type in the URL of the page, followed by our ID, hash and jump.
Once we’ve done this, save and close and as you saw before we now have this item that goes to the article – so that’s the menu type article single and this one, is the one that we manually created, that jumps down.