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

Question

您如何链接（使用<a> ）以使浏览器转到目标页面上的某些子标题而不是顶部？

Answer 1

If there is any tag with an id (eg, <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 .

Answer 2

You use an anchor and a hash. For example:

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

 <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>

Answer 3

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

<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>

Answer 4

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

Answer 5

Here is how:

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

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

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>

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.