Book Section
-----
TY JavaScript 3rd Ed.
Teach Yourself JS 1.5
Teach Yourself DHTML
Teach Yourself JS 1.3
LLWW: JavaScript

General Section
-----
Discussion Forum
Articles / Tips
JavaScript Links
About the Author
Privacy Policy
Contact Me



Other Sites
-----
Website Workshop
JavaScript Weblog

JavaScript Workshop Forums

 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
On pages links?

 
Post new topic   Reply to topic    JSWorkshop Forum Index -> HTML and Web Design
View previous topic :: View next topic  
Author Message
Nasimov
New member
New member


Joined: 26 Nov 2003
Posts: 2
Location: EarthPlanet

PostPosted: Thu Nov 27, 2003 5:40 am    Post subject: On pages links? Reply with quote

Hello,
How would I create links that would go to specific spots on my pages. How would I do that?

Thanks.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
sohnee
Senior Member
Senior Member


Joined: 17 Jul 2002
Posts: 2077
Location: UK

PostPosted: Thu Nov 27, 2003 11:36 am    Post subject: Reply with quote

At the point you want the link to arrive at you put an anchor:

Code:
<a name="part1"></a>


In the hyperlink you reference it with a "#" symbol:

Code:
<a href="page.htm#part1">Link</a>


If you want to go to another part of the same page, you can use:

Code:
<a href="part1">Link</a>
Back to top
View user's profile Send private message Visit poster's website
phil karras
Senior Member
Senior Member


Joined: 15 Jul 2002
Posts: 1776
Location: MD

PostPosted: Fri Nov 28, 2003 10:18 am    Post subject: Reply with quote

I believe for the same page the code, given as:
Code:

<a href="part1">Link</a>

should be:
Code:

<a href="#part1">Link</a>

_________________
Phil K
Circle Software Consulting
Test website: http://cs.yrex.com/
Guidelines for Posting: http://www.jsworkshop.com/posting.html
IHBAAA = It Has Been Asked And Answered
KISS: http://www.jsworkshop.com/bb/viewtopic.php?t=508
Back to top
View user's profile Send private message Visit poster's website
zachariah
Member
Member


Joined: 07 Sep 2002
Posts: 99
Location: Earth

PostPosted: Sat May 15, 2004 8:24 pm    Post subject: Reply with quote

http://www.w3.org/TR/html401/struct/links.html
has all the info you need, but to give you a direct answer...



Set the id on the element you want to jump to.

The name attribute is depreciated, and only works on the <a> (anchor) element, whereas id can be set on any element.



the link to click is the same either way
Code:
<a href="#part1">Link</a>
(this would go to a certain place on the same page -- if you wanted to go to a specific place on another page, you'd preceed the "#" with the path to the other page)


as an example here's how you would set the id for a paragraph you want to jump to
Code:
<p id="part1">Paragraph contents.</p>

_________________
Firefox Thunderbird
Back to top
View user's profile Send private message
sohnee
Senior Member
Senior Member


Joined: 17 Jul 2002
Posts: 2077
Location: UK

PostPosted: Fri Nov 04, 2011 8:11 am    Post subject: Reply with quote

These modern way of doing this is to use element ids, rather than a redundant anchor.

Code:
<a href="#content">Main Content</a>
...
...
Several reams of information later...
<h2 id="content">Hello World</h2>
<p>You can add an id to any HTML element, so no anchor needed.</p>

_________________
I also work on... Steve Fenton's Blog and contribute to The Enhance PHP Unit Testing Framework
Back to top
View user's profile Send private message Visit poster's website
phil karras
Senior Member
Senior Member


Joined: 15 Jul 2002
Posts: 1776
Location: MD

PostPosted: Mon Nov 07, 2011 9:28 am    Post subject: Reply with quote

Sonhee has it all except for one difference between the old & new and that is with the old way of using an <a name=...> tag one could put <br>s between the opening and ending <a>-tags thus spacing the next section so that it would not be jammed up against the top of the page.

Make a page with a good bit of spacing in it to demonstrate this and you will see what I mean. The new way of using any tag's id as the jump-to point does NOT allow for this little trick because anything above it is in the previous section. The only way around it is to add <br>s below the tag with the ID in it that you just jumped to. Not really all that different except the old way was easier to remember for me since I was always using something like:
Code:

   <a name="ComeHere"><br><br></a>
   <h1 id="GoHere">This is Go Here</h1>

If we jump to the "ComeHere" link we have two blank lines above our h1 title if we go to the h1 title's id then we do not. One way around this difference is:
Code:

   <h1 id="GoHere">&nbsp;</h1>
   <h1>This is Go Here</h1>

this assumes the h1-tag has some spacing around it but if not then add some <br>s inside the first h1-tag for more spacing as needed.

One can see situations where one of the ways, old or new, might have a coding advantage in doing a little less work.
_________________
Phil K
Circle Software Consulting
Test website: http://cs.yrex.com/
Guidelines for Posting: http://www.jsworkshop.com/posting.html
IHBAAA = It Has Been Asked And Answered
KISS: http://www.jsworkshop.com/bb/viewtopic.php?t=508
Back to top
View user's profile Send private message Visit poster's website
jardrake
Member
Member


Joined: 18 Aug 2012
Posts: 12
Location: Indiana

PostPosted: Sun Aug 19, 2012 12:09 pm    Post subject: Reply with quote

Here is a good reference on how to use a link to link to other parts of your page.
Internal Anchor Links

One quick caution is to not go overboard with internal anchors, as these probably means your page is too long.
Back to top
View user's profile Send private message
lordkevin
New member
New member


Joined: 11 Dec 2012
Posts: 1
Location: lhr

PostPosted: Tue Dec 11, 2012 5:09 am    Post subject: Reply with quote

Thanks for the nice post...
_________________
sheepskin leather jackets sheepskin leather jackets
womens motorbike jackets womens motorbike jackets
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    JSWorkshop Forum Index -> HTML and Web Design All times are GMT - 7 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2002 phpBB Group
(c) 1997-2002 Starling Technologies and Michael Moncur. Portions (c) Sams Publishing.