Jump to content

[SOLVED] Link to a specific location on another page


Recommended Posts

is there a way to link to a location on a page like in the example below but instead of the link existing on the same page as the target location, the link exist on one page and points to a bookmark on another page?

 

So for example, I want index.html to have a link that takes the user to chapter 4 of content.html (which is half way down the page)

 

<p>
<a href="#C4">See also Chapter 4.</a>
</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>

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

Ya it's easy.

 

in tmp1.html:

<html>
<body>
<a href='tmp2.html#C4'>Go to chapter 4 in tmp2.html</a>
</body>
</html>

 

then in tmp2.html:

<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</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>

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

 

Hope that helps!

Also, if you use the id attribute on any of your tags, you can reference that with the #idname system.

 

Example:

<html>
<body>

<div id="bar"> Hello world! </div>

<!-- Imagine a ton of other data here so that the page would have to scroll. -->

<div id="foo"> 1 2 3 4 5 6 7 8 9 0 </div>

</body>
</html>

 

If you go to index.html#foo or index.html#bar, it will jump to those div locations.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.