CODEWITHSUNDEEP
htmlurlhyperlinkheader
phxvyper
phxvyper

Reputation: 374

in HTML, url contains #, scroll page to header?

If my url is something like: http://www.thisisawebsite.com/page.php#about
How do i make it so when the link is clicked, it'll go to the header "about", or anywhere else i so desire?

Upvotes: 9

Views: 18666

Answers (2)

Kevin Boucher
Kevin Boucher

Reputation: 16675

You need to define the anchor in your markup (near your 'About' header):

<a name="about"></a>

Anyone else having a question about this should explore using an ID attribute on the actual element they want to link to:

<h1 id="about">About</h1>

UPDATE As mentioned by some in the comments, name is a deprecated attribute on the a tag:

Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on , as long as they had identical values.

Note: Use the global attribute id instead.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Upvotes: 12

Richard Jordan
Richard Jordan

Reputation: 8202

Just markup the header on the target page with the id "about" i.e.

About

That way your link on the linking page http://www.thisisawebsite.com/page.php#about will go straight to the "about" header - a h1 in this example but it could be whatever you'd given the id of "about". Remember you should only use the id "about" once on the page though.

Upvotes: 11

Related Questions