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".
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.
To use anchor point positioning, two parts are required: 1. An anchor; 2. A link to the anchor
There are the following methods:
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
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>