Jump to content
xisto Community
Albus Dumbledore

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

Recommended Posts

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 by Becca (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

Cheers, and keep 'em coming!

Edited by mama_soap (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.