direct users to specific locations in page

Question

I want to set up a menu to direct the user to the same page, but diffent locations

  <ul>
      <li><a href="realtime.php#location1">location 1 in page</a></li>
      <li><a href="realtime.php#location2">location 2 in page</a></li>                
   </ul>

here is the page's html: (realtime.php)

 <div id="location1" name="location1"></div>
    <some html....>
    <div id="location1" name="location1"></div>
    <some other html...>

It doesn't work for me: 1. It doesn't redirect to the correct location inside the page 2. If I'm viewing the current page, It does nothing -> meaning doesn't even reload the page.

if your url and your anchors have different names, how could they work? `location1` cannot find `squeeze` or `ETF` — dnagirl, Oct 15 '12 at 14:31
http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id — , Oct 15 '12 at 14:36
hi @dnagirl , thanks for the reply. I have corrected the errors. It is still not working.. — devmonster, Oct 15 '12 at 14:53

score 1 · Answer 1 · answered Oct 15 '12 at 14:31

1

The fragment identifiers have to match the id of the element that is being targeted.

If you want to link to id="squeeze" then you need #squeeze not #location1

I also recommend avoiding linking to <a> elements in favour of a block element containing the content you want to link to.

<div id="sequeeze">

answered Oct 15 '12 at 14:31

Quentin

914,110
126
1,211
1,335

hi Quentin, please see edits in msg body. It's still not working – devmonster Oct 15 '12 at 15:00
@devmonster — Your HTML is invalid with made-up `name` attributes and duplicate IDs. If you make it valid and put the content in the divs as I said, then it works: http://jsfiddle.net/dB3gH/ – Quentin Oct 15 '12 at 15:03
Hi Quentin, I see that your code works. but mine still isn't. I have entered my code to [here](http://jsfiddle.net/dB3gH/1/) to see exactly why and it works in jsfiddle but not in my page. My page in a regular html5 ` ` page. The divs contain iframe, though. maybe that the reason.. – devmonster Oct 15 '12 at 15:21

score 0 · Answer 2 · answered Oct 15 '12 at 14:31

0

just use links with anchors

<ul>
  <li><a href="#location1">location 1 in page</a></li>
  <li><a href="#location2">location 2 in page</a></li>                    
</ul>

than inside the body

<div id="location1"></div>

answered Oct 15 '12 at 14:31

Roman

504
4
10

direct users to specific locations in page

2 Answers2