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?

score 30 · Accepted Answer · edited May 23 '17 at 12:32

30

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.

edited May 23 '17 at 12:32

Community

1
1

answered Jul 16 '13 at 21:29

Mike Christensen

88,082
50
208
326

1

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. – Quentin Aug 16 '15 at 21:30
If it's a react app then how to do that ?? – ZebraCoder Sep 19 '22 at 05:14

score 16 · Answer 2 · edited Aug 11 '20 at 19:23

16

You can simply use

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

to link to a section/id of another page by

edited Aug 11 '20 at 19:23

doğukan

23,073
13
57
69

answered Jun 20 '17 at 16:21

mayur nandu

171
1
4

It distorts the proportion (width percentage) of the page when navigated. Do you know why? – Deniz Mar 16 '21 at 20:29
eg: – JWC May Apr 04 '23 at 06:28

score 3 · Answer 3 · edited Apr 05 '23 at 19:30

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.

edited Apr 05 '23 at 19:30

Mike Christensen

88,082
50
208
326

answered May 24 '21 at 08:29

nezza1

83
8

score 0 · Answer 4 · answered Aug 10 '20 at 15:06

To link from a page to another section of the page, I navigate through the page depending on the page's location to the other, at the URL bar, and add the #id. So what I mean;

<a href = "../#the_part_that_you_want">This takes you #the_part_that_you_want at the page before</a>

score -1 · Answer 5 · edited Mar 06 '17 at 21:16

-1

I tried the above answer - using page.html#ID_name it gave me a 404 page doesn't exist error.

Then instead of using .html, I simply put a slash / before the # and that worked fine. So my example on the sending page between the link tags looks like:

<a href= "http://my website.com/target-page/#El_Chorro">El Chorro</a>

Just use / instead of .html.

edited Mar 06 '17 at 21:16

Chait

1,052
2
18
30

answered Mar 06 '17 at 15:47

Juliette

1

score -3 · Answer 6 · edited Mar 05 '18 at 21:21

-3

To link from a page to another section just use

<a href="index.php#firstdiv">my first div</a>

edited Mar 05 '18 at 21:21

Bilal

2,883
5
37
60

answered Mar 05 '18 at 19:18

Olagunju Emmanuel Art

1

To link from a page to another section just use My First Dig – Olagunju Emmanuel Art Mar 05 '18 at 19:23

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

6 Answers6

Linked