Can this be done? Anchors

HTML & CSS
1

If i have a menu with submenus like this:

<ul>
<li><a href="#">link</a>
  <ul>
     <a href="#anchor">anchorlink</a>
  </ul>
</li>
<li><a href="#">link</a>
  <ul>
     <a href="#anchor">anchorlink</a>
  </ul>
</li>
</ul>

As it looks now, the anchors only work if you are on the correct page, but if I want it to work from other pages I would have to do something like for example “index.php#anchor”. My question is if it is possible to add the page-name (like “index.php”) to an anchor if you click an anchor from another page.

like… if im on “about.php” and want to go to an anchor-link on “index.php”.

If I were to add “index.php” etc to each link manually, wouldnt that mean the page have to be reloaded every time i click an anchor, even if on the correct page?

2

Yes, certainly. That’s what they are for. It means you can link to specific sections on other sites, too, if they have an id like that.

If I were to add “index.php” etc to each link manually, wouldnt that mean the page have to be reloaded every time i click an anchor

Yes.

Be aware that your HTML is invalid. You can only have list items as direct children of a UL, so you need to change this

<ul>
     <a href="#anchor">anchorlink</a>
</ul>

to this

<ul>
     <li>
           <a href="#anchor">anchorlink</a>
     </li>
</ul>
3

but what are you trying to do?

Remember an ANCHOR will lead to a specific part of an HTML document where as a LINK will lead to a document on the web ( or for argument’s sake… within a site)

There in lies the difference between: #, #anchor, page.php, and page.php#anchor.

the first is generally a placeholder… really lending nowhere,
the second will take you to the document: page.php
the third will go to the element with the ID of “anchor” in THAT SAME DOCUMENT.
and the last will take you to the element with the ID of “anchor” in the DOCUMENT named page.php.

if you are doing a site navigation going from page to page you really don’t need the anchor. if you are navigating within the same page, you really don’t need the document name/ path

hope that helps

4

If you’re on index.php and you follow a link to index.php#anchor, I would not expect that to reload the page, but to just treat it like #anchor - so you shouldn’t need to worry about forcing a reload by including the filename as well - but I’m happy to be corrected if I’m wrong on that one!

5

I guess the main use case there would be if you’ve got included fragments, whether it’s the nav menu or any other bit of content that is repeated across the site - you will need to have filename.php#anchor in that case, so that it works regardless of which page it is called from.

6

I’m confused, is this a typo?

There in lies the difference between: #, #anchor, page.php, and page.php#anchor.

the first… [ok]
the second will take you to the document: page.php
the third will go to the element with the ID of “anchor” in THAT SAME DOCUMENT.