Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Anchor Tags in menu not working

Posted on 2012-09-12
Medium Priority
Last Modified: 2012-09-14
I've never had this issue before. I am trying to have my main menu have a link to a lower part of the page and clicking the menu item does nothing.

The menu link uses a variable to tell coldfusion to display a piece of content lower on the page. If the url.var isn't in the url, the content won't appear.

I added the #a1 anchor to the end of the link and when I click on the link, nothing happens at all. The url doesn't change, the page doesn't reload with the url variable in the address bar and the page doesn't MOVE down to the anchor location.

I've read the following information online about this type issue and none of the solutions seem to fix my problem.

- If you're using Jquery, it could be conflicting with the anchor tag (don't know how to troubleshoot that)

- If my anchors use the NAME feature, they must have the ID as well (which I do).

- If the anchor tag is located inside a certain type of DIV, it could possibly not work.

- If the page size (height) is variable, the browser may not know how to locate where the anchor exists.

- Use a javascript "onclick" alternative in the link code. (tried, but it doesn't make a difference)

<A href="index.cfm?n1=photos#a1" class="hdrmnu">photos</A>
<a id="a1" name="a1"></a>

Open in new window

I've used anchor tags for 12 years in my web development and this is the first time I've encountered anything like this.
Question by:day6
  • 2

Author Comment

ID: 38391790
I've actually relocated the anchor above a DIV tag, which now allows the anchor to focus properly when I click the menu item, but NOW it doesn't pass the URL variable in the page reload.

The only way I could get this to work is to actually duplicate the page I was on and then change the link to reflect a different .cfm template with the anchor tag. Then it worked fine.

I don't get this.

I've always been able to create a URL with variables and then put an anchor at the very end AND stay on the same template page, but it reloads the page with the variables in the URL, which then creates new content on the page based on the variables loading. All I'm trying to do is locate the focus down lower on the page where the new content appears.  I don't want to have to create a new template for every time I want new content to appear.
LVL 51

Accepted Solution

ahoffmann earned 2000 total points
ID: 38393986
there're various quirks:

if you loaded the url (including the # anchor) once, the browser cached it, so you need to disable the cahce to make it work, or you need to clear your cach before reloading
note that this cannot be done from  inside the loaded page

some browsers have trouble to find the proper anchor, depending on its definition or on the part of the loded page just being displayed (soryy don't have details handy, but you already mentioned some)

if you loaded the url (without the #) once and then scroll in the displayed window and then click on a link with the anchor it also might not work if the anchor is in the current displayed area

one way to enforce going to thje specified anchor is to use unique urls, like:
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38393996
I am not sure where you get all this information from

If you have

<a href="#a1" class="hdrmnu">photos</A>


<a name="a1">Named anchor to go to</a>


<div id="a1">content to show</div>

it should work in all newer browsers unless the code for the menu overrides the onclick (likely)
LVL 51

Expert Comment

ID: 38394225
... where id= overrules name=

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question