Sunday, September 26, 2010

Internal page links

Along with linking to other documents, it’s possible to link to another point in the same
web page. This is handy for things like a FAQ (frequently asked questions) list, enabling the
visitor to jump directly to an answer and then back to the list of questions; or for top-ofpage
links, enabling a user single-click access to return to the likely location of a page’s
masthead and navigation, if they’ve scrolled to the bottom of a long document.
When linking to other elements on a web page, you start by providing an id value for any
element you want to be able to jump to. To link to that, you use a standard anchor element
(<a>) with an href value equal to that of your defined id value, preceded by a hash
symbol (#).
For a list of questions, you can have something like this:
<ul id="questions">
<li><a href="#answer1">Question one</a></li>
<li><a href="#answer2">Question two</a></li>
<li><a href="#answer3">Question three</a></li>
</ul>
Later on in the document, the first two answers might look like this:
<p id="answer1">The answer to question 1!</p>
<p><a href="#questions">Back to questions</a></p>
<p id="answer2">The answer to question 2!</p>
<p><a href="#questions">Back to questions</a></p>
As you can see, each link’s href value is prefixed by a hash sign. When the link is clicked,
the web page jumps to the element with the relevant id value. Therefore, clicking the
Question one link, which has an href value of #answer1, jumps to the paragraph with the
id value of answer1. Clicking the Back to questions link, which has an id value of
#questions, jumps back to the list, because the unordered list element has an id of
questions.

**NOTE : It’s worth bearing in mind that the page only jumps directly to the linked element if
there’s enough room underneath it. If the target element is at the bottom of the web
page, you’ll see it plus a browser window height of content above.

No comments:

Post a Comment