How to locate content with the "a" tag in HTML page

When making web pages, we often encounter the need to add side navigation, and click the navigation to automatically scroll the page to a specified location, such as the floor of an e-commerce website. This involves the anchor application of the <a> tag, which is called "anchor tag".

1. What is an anchor¶

In layman's terms, the location where we want the page to jump to is the anchor point. An anchor is a kind of hyperlink, but it is a hyperlink inside the page, which points to a specific part of the page.

2. the use of anchor tags¶

To use anchor point positioning, two parts are required: 1. An anchor; 2. A link to the anchor

There are the following methods:

Method 1:¶

Use the a tag as anchor and link, commonly known on the Internet as "name" positioning, the code is as follows:

<a href="#mao">Click here to go to the target location</a>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>< br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="mao">Target location</a>

But in many cases, the anchor object is not necessarily an a tag, it is unnecessary to add an additional a tag in order to use anchor positioning

Method 2¶

Use the a tag as a link, and use other elements (block elements are recommended) as anchors. Commonly known as "id" positioning on the Internet, the code is as follows:

<a href="#mubiao">Click here to go to the target location</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> < br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="mubiao">
     target location
    </div>

You can even link from one page to the anchor position of another page, the code is as follows:

Page 1

<a href="maodian2.html#other_page" target="_blank">another page</a>

page 2

<div id="other_page">this is the element on the "another page"</div>