954,595 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Linking

Hello all,

I need some help with linking.

I someone clicks on "Step one" i want it, to go down the page and to where step one is located, and then when you click top of page, it goes up to the top of the page...

How do i do that??

Cohen

cohen
Practically a Posting Shark
822 posts since Nov 2008
Reputation Points: 46
Solved Threads: 45
 

Hello all,

I need some help with linking.

I someone clicks on "Step one" i want it, to go down the page and to where step one is located, and then when you click top of page, it goes up to the top of the page...

How do i do that??

Cohen

Ha! I got curious and looked it up. This article seems to explain it well. http://www.yourhtmlsource.com/text/internallinks.html

Good question, never thought about that one before.

MatEpp
Junior Poster in Training
79 posts since Jan 2009
Reputation Points: 21
Solved Threads: 12
 

Thanks! Works a treat!

Cohen

cohen
Practically a Posting Shark
822 posts since Nov 2008
Reputation Points: 46
Solved Threads: 45
 

I know its solved and all... but just incase any of you other people are interested and don't feel like going to read it up on another site, here is how its done.

To link to a specific title (text) on a page, simply give it an id.
E.g.

<html>
<head>
<title> Linking to specific content </title>
</head>
<body>
<p>Hi welcome to my website, click <a href="#skills">here</a> to view my skills</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pede. Donec augue. Vivamus vitae nisi quis quam viverra semper. Etiam fringilla viverra dui. Sed in elit. Nulla a nisl. Morbi non erat sit amet odio gravida pulvinar. Aliquam sodales. Praesent venenatis ante vel purus. Vivamus sapien felis, lobortis facilisis, imperdiet nec, cursus ut, neque. Morbi id enim ut elit scelerisque dictum. Cras aliquam ornare odio. </p>
<div id="skills"><h2> Skills </h2></div>
<p>Fusce faucibus quam id libero. Aenean volutpat tempus est. Mauris interdum lobortis arcu. Nullam ultrices dui. Cras leo sapien, porttitor ac, tincidunt id, suscipit volutpat, erat. Nullam vulputate, justo eu vulputate convallis, sem ipsum porta nulla, vel ultricies eros elit sit amet metus. Aliquam fringilla, magna nec consequat aliquet, augue sapien viverra elit, sed convallis est magna sit amet nibh. Vestibulum pharetra tincidunt felis. Morbi vitae mi. Cras suscipit. Quisque pede diam, tempor eget, posuere porttitor, fringilla sed, erat. Quisque vulputate neque sit amet metus. Vivamus arcu nisi, interdum non, lacinia ac, dictum sed, orci. </p>
</body>
</html>


To link back to the top of a page is quite easier.
E.g.

<html>
<head><title> Link to the top of the page </title>
</head>
<body>
<p>Nam et lorem sit amet lectus ultricies ultrices. Nam bibendum dui at nisl. Donec rutrum, nisi ut auctor luctus, leo nulla pretium leo, in consequat risus sem sed urna. Sed fermentum, dui ac faucibus feugiat, nisi mi venenatis quam, eu pellentesque nisl mi adipiscing risus. In feugiat. Vivamus metus ligula, sagittis ut, hendrerit a, adipiscing eget, eros. Curabitur imperdiet leo. Nullam eu libero. Aenean volutpat est adipiscing ipsum. Donec ac est. Duis tristique. Suspendisse urna tellus, vehicula eu, tempor vel, lacinia ut, nunc. </p>
<p>Fusce euismod nisl a eros. Phasellus facilisis. Nam odio. Praesent et lacus. Nullam ac tortor ut orci sollicitudin dictum. Quisque risus arcu, pharetra vel, ullamcorper congue, sagittis eget, orci. Nulla facilisi. Suspendisse potenti. Curabitur nisi nisl, viverra a, ultrices adipiscing, sollicitudin non, lectus. Sed cursus ultrices metus. Curabitur et leo eu tellus venenatis adipiscing. Curabitur ipsum. Maecenas facilisis mauris et mi. </p>
<p><a href="#top"> back to top </a></p>
</html>


All done;)

macneato
Posting Pro in Training
421 posts since Jun 2007
Reputation Points: 46
Solved Threads: 48
 

Now we just have to teach the beginners the meaning of that lorem ipsum stuff. :icon_cheesygrin:

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 

Thanks! :)

Cohen

cohen
Practically a Posting Shark
822 posts since Nov 2008
Reputation Points: 46
Solved Threads: 45
 

This is you want to know.
One link to top of page and another to bottom.
First, you type two link element in your html document.
e.g., -- --

Then, you set your link which you want to link top/bottom

e.g., To Bottom
To Top

You clip "To Bottom", the link go to the bottom of page
and so you clip "To Top", the link go to the top of page.

Zero13
Practically a Master Poster
624 posts since Jan 2009
Reputation Points: 120
Solved Threads: 139
 

Try this type of 'goto top' link
the style would be in a styleshweet in a page but this is an example

<a href='#top' style='background: transparent; top: auto; left: auto; bottom: 1px; right: 1px; position: fixed;'> GoTo Top </a>

creates a link that remains in the bottom right corner of the window on resize or scroll and always links to the top of the page.
Its the last line in the include(menu) so appears on every page

almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: