Working with anchors in Joomla 2.5
Adding anchors in Joomla 2.5 articles is a great way to add navigation to very long pages. For example, you may be familiar with links that say, "back to top". When clicked, this brings you back to the top of the page. Also, on FAQ pages, the top of the page may contain questions that you can click to jump to the correct place on the page.
Creating anchors in Joomla 2.5 is a 2 step process. The first step is to add the anchor itself, and then the next step is to create a link to the anchor.
In this Joomla 2.5 tutorial, we will walk you through both of these steps. We will pretend we have a FAQ page. At the top of the page will be listed several questions, and the answers will be listed at the bottom of the page. We'll walk you through the steps for setting "Question 3" to be a link, that when clicked, will bring the user towards the bottom of the page where the answer for question 3 is printed.
Creating and linking to a new Anchor in Joomla 2.5:
- Your first step is to log into your admin dashboard and open for edit the article that you would like to change
- Create the anchor
The anchor is the location on the page you would like to bring a user to. To create an anchor, place your cursor in the Joomla 2.5 article editor where you want to place the anchor, and then click the anchor icon (see screenshot below). Type a name for your anchor and then click Insert.
- Link to the anchor
After creating the anchor we now need to create a link to it. Highlight the text you want to have as the link, and then click the link icon in the editor. For the Link URL, enter # followed by the anchor name. In the above example, we created an anchor named question3, and so our Link URL is #question3.
- Save your changes and test your new anchor! In our testing, when the user clicks Question 3 they are taken to the Answer to Section 3 section of the page. You now know how to work with anchors in a Joomla 2.5 article!
We value your feedback!
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
2013-04-29 11:38 pm
I've used anchors before with Dreamweaver, and this is the same procedure; however, on my Joomla page it just doesn't work. I first tried it exactly as you have it written above, but then when I looked at the code, I noticed the anchor was not within the link code, so I decided to try and move it to within the link code. Still doesn't work.
Here is how I did it the first time: Placed my cursor before the word Purchase, and it shows the phrase is AFTER the "link" codes. Like this:
<p><strong><a name="znitro"></a>PURCHASE BELOW VIA SECURE PAYPAL</strong></p>
There was no "link" on the page when I went to the site. So I decided to move the "purchase" phrase within the LINK code like this:
<p><strong><a name="znitro">PURCHASE BELOW VIA SECURE PAYPAL</a></strong></p>
However, after "saving" my page and going to the site, it still was not a "link". When I returned to the editor, I noticed that Joomla didn't even save my changes!
The same thing happened with the anchor link at the bottom of the page:
<a href="#znitro">BUY NOW</a>!
The only words that LOOK like a link on my page is BUY NOW. But people would not know to click on the "Purchase" phrase because it doesn't LOOK like a link by just putting the cursor before the phrase and clicking on "anchor" and then inserting an anchor name and saving.
Page of site: http://www.goapplego.co/index.php/znitro-shield
2013-04-29 11:45 pm
P.S. I then went in and created a "normal" link in the editor around "PURCHASE BELOW VIA SECURE PAYPAL" and the anchor I put in was znitro, then of course the link was #znitro. But then when I click on the link PURCHASE it goes to a 404. I also tried #znitro in both places.
2013-04-29 11:49 pm
There is no way to edit these posts, so I'll just make this the last update -- I removed all the links until I hear back from you because it was messing up my page by showing a 404 every time I clicked on either the anchor or the link.
2013-04-30 2:49 pm
When working with anchors, the tags can either stand alone, or around the text:
And the linking code should work with either a relative or absolute path:
relative: <a href="#anchor">Link to Anchor</a>
absolute: <a href="http://example.com/#anchor">Link to Anchor</a>
The anchor portion of the code will not display as a link, as it is simply a destination. The text or image you click on to move to the anchor is your link.
The description with the purchase and BUY NOW sounds as if they should work correctly. If you would not mind placing the code back in there and commenting back so we could test, that would be perfect. Perhaps we can see something with the code that is not quite right. Testing independently has not led to a malfunction.
2013-04-30 5:14 pm
Glad I contacted you. When you said "the anchor portion of the code will not display as a link as it is simply a destination" then I went back and started all over and gave it another try.
IT NOW WORKS!!!
So thank you for the added info! SMILE
Post a Comment
Do you want to publish a tutorial to our support center?