Jump to another part of a document (on the same page)

helloadam 0 Tallied Votes 878 Views Share

Have you ever wanted a link to go to the bottom of the same page? Well in this snippet you see how..

1) On the top where is says

<p><a href="#C4">See also Chapter 4.</a></p>

is a link going to Chatpter 4 at the bottom of the page if you look at Chapter 4 in the Snippet

<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>

There is <a name="C4"> which was is the same as up on top where the link is to chapter 4.
2) That is IT!

<html>
<body>

<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>

<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>
Dark_Omen 5 Posting Pro

Thanks, just was wondering how to do that. (I dont work with html often)

mmiikkee12 1 Posting Whiz in Training

I've always wanted to know how those things were done, too lazy too Google it :) Good work!

xhu 0 Newbie Poster

How can I jump to another link?

bigbadbear 0 Newbie Poster

useful. anyways how about if you want to click a link and it will be shown on the same page and in on a specific table? is tha possible?

Veneficae 1 Light Poster

anyways how about if you want to click a link and it will be shown on the same page and in on a specific table?

If it was in the same page to begin with, yes. If you have a table with content inside down at the bottom of the page and you want to go down there with a single click, this code will do just that. You just need to put an <a> tag on something inside the table with a name, then on the link you have the href property set to the anchor (#) and then the name. Just like in the OP's code.

If you mean loading content from another page, into the page you're currently on, you need to use jQuery or AJAX.

bigbadbear 0 Newbie Poster

yeap. im actually thinking of If you mean loading content from another page, into the page you're currently on. thanks

almostbob 866 Retired: passive income ROCKS

Given <a name='linkname'></a> is the target
on the same page <a href='#linkname'>goto linkname</a> on another local page <a href='../relativefolder/page#linkname'>goto linkname</a> cross site page <a href='http://www.thatsite.com/page#linkname'>goto linkname</a> the target does not have to be an <a>anchor, any named element can be the target, the actual target is the name not the element itself

almostbob 866 Retired: passive income ROCKS

useful. anyways how about if you want to click a link and it will be shown on the same page and in on a specific table? is tha possible?

something like using the onclick event to change the innerhtml of the table cell
may work, but I dont use tables for layout so am out of touch

Javvy -1 Junior Poster
KazmiLahore 0 Newbie Poster

Thanks.
Very easy made.

Have you ever wanted a link to go to the bottom of the same page? Well in this snippet you see how..

1) On the top where is says is a link going to Chatpter 4 at the bottom of the page if you look at Chapter 4 in the Snippet

There is <a name="C4"> which was is the same as up on top where the link is to chapter 4.
2) That is IT!

BuckOneArm 0 Newbie Poster

Nice !!! Never thought it would have been this easy!! =D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.