Getting a link to go to a specific section on another page

Question

I have a link on one page that needs to go to a different page, but load to a specific section on that other page.

I have done this before with bootstrap but they take all the 'coding' out of it, so I need to know how to do from scratch. Here is the markup I have based on this link (not the best resource, I know): http://www.w3schools.com/html/html_links.asp

**Page One**
<a href="/academics/page.html#timeline> Click here </a>
**Page I am linking to**
<div id="timeline" name="timeline"> ... </div>

Can I do this with just HTML, or do I need some JavaScript? If I need to do it via JS, it needs to be on the target page, right?

Solution 1

I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:

<div id="timeline" name="timeline" ...>

To the old format:

<a name="timeline" />

You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.

Also, check out this similar question.

Solution 2

You can simply use

 <a href="directry/filename.html#section5" >click me</a>

to link to a section/id of another page by

Solution 3

To navigate to a section of another page use:

<a href="example.html#example-section>name-of-link</a>

The example.html would be the page you want to go to, and the #example-section would be the name of the id on that page that you want to navigate to.

Comments

[Quentin]

In this case "older browsers" are Netscape 4 and earlier and Internet Explorer 3 and earlier. Nobody needs to support them. On a related note, the anchor element doesn't have an optional end tag. You can't use the /> syntax in HTML.

[Olagunju Emmanuel Art]

To link from a page to another section just use <a href="index.php#myFirstDiv">My First Dig</a>

[Deniz]

It distorts the proportion (width percentage) of the page when navigated. Do you know why?