CODEWITHSUNDEEP
html
cdub
cdub

Reputation: 25701

Jump to a particular place in a webpage

I have links like this:

 <a class="faq_text_header_jump" href="#general_questions">General Questions</a><br>
  <a class="faq_text_header_jump" href="#how">How do i..</a><br>
  <a class="faq_text_header_jump" href="#once_you_book">Once you've booked lessons..</a>

And a target like so:

<div class="faq_text_section_header" id="how"><h2>How do I...?</h2></div>

But my 2nd and 3rd links don't work.

See an example here: http://lessonshark.com/dev1/homes/faq

Upvotes: 0

Views: 6205

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

Use the id attribute to specify the destination of the link. This is the recommended practice, though the older <a name=...>...</a> works too, though it is more limited. What you must not do under any circumstances is to specify the destination twice using the same name. Currently the markup has

<a name="how_do_i">
    <div class="faq_text_section_header" id="how_do_i" >How do I...?</div></a>

This is invalid as per HTML 4.01 and XHTML 1.0 (though permitted in HTML5 drafts), since an a element must not contain a div element. More seriously, this makes how_do_i doubly defined, which can cause just about anything. Fix this to just

<div class="faq_text_section_header" id="how_do_i" >How do I...?</div>

and make sure that your link uses href="#how_do_i" (as it does now, but the question said otherwise). Consider making that div an h2 (and tune the stylesheet accordingly), since it’s really a heading.

Also note that in the link,

<a class="faq_text_header_jump"href="#how_do_i">How do i..</a>

there should be a space before href. This is just formal syntax, but it is best to get it right so that you can utilize a validator efficiently.

Upvotes: 1

ThdK
ThdK

Reputation: 10546

You need a named anchor somewhere in your document.

To create a named anchor, just use HTML like this:

<a name="anynameyoulike"></a>

Then, you can jump back to that point in the page with a link like this one:

<a href="#anynameyoulike">Jump to Named Anchor</a>

Upvotes: 0

Roger
Roger

Reputation: 1082

HTML has a solution for that.

use

<a name="target">

to mark the position in the page you want to jump to

<a href="page.html#target">

Upvotes: 7

Related Questions