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

created at 07-03-2021 views: 1

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>
Please log in to leave a comment.