How To Create Html Page Anchors Click A Link And Take You To A Certin Place On The Same Page

[Albus Dumbledore 0]

Have you ever wondered how people have a normal link but all it does it take you to the middle of a long page? well here is a solution

 

DEMO: Here

 

Ok well first off for the link it will be just like a normal link code except you wont put a http://lyrics.url.com/ it will look somthing like this

 

<a href="#name">Click This Link!</a>

there must be a # sign in front of this to work..

 

now, for the content that the person will be re-directed to after clicking the link

 

<a name="name"></a>

the items in bold is what you need to change

 

<a name="name"></a>

if you change the above bold to somthing for say, css...then you would need to change

 

<a href="#name">Click This Link!</a>

the bold above to css as well. otherwise this will not work, this was just a quick tutorial if you have any questions please post them, if somthing is not clear to you please post and i will try to clarify it for you

 

hope it helps, if it would make more sence to view the source to the demo site Here

Edited March 5, 2006 by Becca (see edit history)

[wild20 0]

Perfect thanks. I read this on w3schools. But they didn't put it in very easy terms. Thanks for making it clearer. Where did you find this. Or did you just simplify this? You should make your own tutorial site. I didn't know what you put to link to, now I know and this will be a lot easier to link now since I am putting a WHOLE Bible on my site. Which I know, is quite a feat. Hey thanks a bunch.

[Albus Dumbledore 0]

well accualy i viewed the source of Hp Lexicon, a harry potter site and i figured it out that way....and i typed this up, and your welcome, and good luck with that bible

[mama_soap 0]

Here's a possible extension, for those who like messing with javascript.

Here is a demo of what I'm talking about.

 

This is what the navigation bar is made of:

<div id="header">  <ul id="mainNav">	<li><a id="navIntro" href="#intro">Welcome</a></li>	<li><a id="navResume" href="#resume">Resume</a></li>	<li><a id="navPubls" href="#publs">Publications</a></li>	<li><a id="navLecture" href="#lecture">Lectures</a></li>	<li><a id="navVisits" href="#visits">Visits</a></li>	<li><a id="navWss" href="#wss">Workshops</a></li>	<li><a id="navAdmin" href="#admin">Administration</a></li>	<li><a id="navContact" href="#contact">Contact</a></li>  </ul></div>

Thing is that you can selectively hide parts of your document using some javascript that rushes through your divs, making them appropriately visible or invisible. On browsers that have javascript disabled, you will see a page that resembles what Albus was originally talking about. I'm afraid I'm too lazy to explain this in detail, besides it isn't my idea anyway... I think I found this first on an excellent tutorial from "A List Apart", so those interested - please have a look at that.

 

Btw - Albus, cool stuff

The only nit I have is that I think you've spelled "sense" wrong - it's not "sence", it's "sense", unless I'm badly mistaken

 

Cheers, and keep 'em coming!

Edited March 5, 2006 by mama_soap (see edit history)

[Becca 0]

It's called page anchoring. Going to change the title.You can also go back to the top of the page but putting the page anchor on the first text or thing on the page and the link anywhere else on the page . so when you click it it directs back to that area.

[Tyssen 0]

The name attribute became deprecated with HTML 4.0. You target IDs instead now. So instead of <a name="blah"> it should be <a id="blah">.