DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- Site Layout and Usability (http://www.daniweb.com/forums/forum130.html)

- - Linking (http://www.daniweb.com/forums/thread166393.html)

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

Quote:

Originally Posted by cohen (Post 771627)

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.

Thanks! Works a treat!

Cohen

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;)

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

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., <a>--</a> <a>--</a>

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

e.g., <a href="#bottom" id="top">To Bottom</a>
<a href="#top" id="bottom">To Top</a>

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.

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