Working with anchors in Joomla 2.5
Written by Brad MarkleAdding 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 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!
When working with anchors, the tags can either stand alone, or around the text:
<a name="anchor"></a>text
<a name="anchor">text</a>
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.
Best Regards,
Scott M
IT NOW WORKS!!!
So thank you for the added info! SMILE
Writing Articles in Joomla 2.5
Latest Questions
Need more Help?
Search
Ask the Community!
Current Customers
| Chat: | Click to Chat Now | E-mail: | support@InMotionHosting.com |
|---|---|---|---|
| Call: | 888-321-HOST (4678) | Ticket: | Submit a Support Ticket |
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