How do I link to part of a page? (hash?)

Question

How do you link (with <a>) so that the browser goes to certain subheading on the target page as opposed to the top?

Standpoint

Answer 1

If there is any tag with an id (e.g., <div id="foo">), then you can simply append #foo to the URL. Otherwise, you can't arbitrarily link to portions of a page.

Here's a complete example: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Linking content on the same page example: <a href="#foo">Jump to #foo on same page</a>

It is called a URI fragment.

Goosander

so do you use the complete example or the same page example? isn't the complete example the same thing? – Transience

if we had a restful page with url like : domain.com/#home?page=1 how to use an id in href? – Conjugated

@irajjelodari You'd put the hash at the end: domain.com/?page=1#home – Quinquennium

i had to use 2 hashtags in the url like : example.com/#RouteName?page=1#ID. one for routing and one for navigation inside of current page. finally i used html5 mode of URL in order to removing route hashtags ;) @Quinquennium – Conjugated

@Daniel sir ,I am having a similar situation, What to do if the #foo element is in hidden condition? – Vide

is there a way to do this with a class that is only used once? – Renounce

The blog platform Medium.com seems to ignore the hash, but it works with a slash before the hash. (n=1, but I have no reason to think it will be different for other posts/blogs on the same platform.) – Peshawar

How to apply this in react ?? – Compressor

Answer 2

You use an anchor and a hash. For example:

Target of the Link:

 <a name="name_of_target">Content</a>

Link to the Target:

 <a href="#name_of_target">Link Text</a>

Or, if linking from a different page:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

Pressurize

The broser will also jump to any element with the id name_of_target. You need not use an <a> tag as the target. So another target could be <h3 id='name_of_target'>Content</h3>. – Quoits

Note this is now obsolete in HTML5. – Galata

Just to clarify Tim's comment, fragment links and empty "a" tags are still current in HTML5. Using the "name" tag is deprecated, replaced by "id." html.spec.whatwg.org/multipage/browsing-the-web.html#navigate – Zymogenesis

Answer 3

On 12 March 2020, a draft has been added by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash

#:~:text=<Text To Link to>

Working example on Chrome Version 81.0.4044.138:

Click on this link Should reload the page and highlight the link's text

Pushbike

I just tried this in Firefox and it highlighted text, unless the text was in my <hr> tag, but this didn't scroll down to the text in the page like in Chrome or as an anchor would. Also, reloading that URL doesn't seem do do anything, even after scrolling to a different place on the page, but going off the page and going back to the URL with that parameter works again (in Chrome). I wish this was more consistent... Do you have a link to this logic and related? – Finalism

It is a Chromium-based only feature. I found this site with more on it: mgearon.com/html/text-fragments – Finalism

Check Can I Use for the current state of browser support – Plattdeutsch

Answer 4

Just append a hash with an ID of an element to the URL. E.g.

<div id="about"></div>

and

http://mysite.com/#about

So the link would look like:

<a href="http://mysite.com/#about">About</a>

or just

<a href="#about">About</a>

Rask

Answer 5

Here is how:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

Concern

Answer 6

You have two options:

You can either put an anchor in your document as follows:

<a name="ref"></a>

Or else you give an id to a any HTML element:

<h1 id="ref">Heading</h1>

Then simply append the hash #ref to the URL of your link to jump to the desired reference. Example:

<a href="document.html#ref">Jump to ref in document.html</a>

Jamnes

Answer 7

Provided that any element has the id attribute on a webpage. One could simply link/jump to the element that is referenced by the tag.

Within the same page:

<div id="markOne"> ..... </div> 
   ......
<a href="#markOne">Jump to markOne</a> 

Other page:

<div id="http://randomwebsite.com/mypage.html#markOne"> 
  Jumps to the markOne element in the mypage of the linked website
</div>

The targets don't necessarily have an anchor element.

You can go check this fiddle out.

Moulding

Answer 8

also, you can use this in frame or iframe src property.

So

<iframe src="page.html#content">

will take the page to that point, if that id exits in the document.

Josephinejosephson