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.

how-the-anchor-text-will-workIn 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:

  1. Your first step is to log into your admin dashboard and open for edit the article that you would like to change
  2. 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.
    create-anchor
  3. 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.
    link-to-anchor
  4. 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!
Continued Education in Course 102: Writing Articles in Joomla 2.5
You are viewing Section 11: Working with anchors in Joomla 2.5
Section 10: Adding a Horizontal Line in a Joomla 2.5 article
Section 12: How to indent an entire paragraph in Joomla 2.5
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
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.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

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.
Staff
20,113 Points
2013-04-30 2:49 pm
Hello PJPJPJPJ,

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
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

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

5 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!