HTML Basic Tutorial

HTML Media

HTML Reference Manual

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML Anchors

When the content of an HTML web page is very long, it may be inconvenient for users to browse the page, such as when they have scrolled to the bottom and want to return to the top, they can only drag the scroll bar to the top (or refresh the page, but this method is not good in terms of experience), a better method is to set an anchor to deal with this problem, to achieve page or cross-page jump

Example Demonstration of Anchor

Example

<!DOCTYPE html><html><head>
　　　　<meta charset="UTF-8">
　　　　<title>Basic Tutorial(oldtoolbag.com), Anchor Setting</title></head><body>
　　　　　<a href="#bottom" name="top">Go to the Bottom</a>
　　　　<div style="height:　5000px; width:　300px; background-color: #123">Here is a demonstration of how to jump to the top and bottom of the page</div>
　　　　<a href="#top" name="bottom">Back to the Top</a></body></html>

Test and See ‹/›

How to Set an Anchor

(I) Page Internal Jump Setting Method One:

Set an anchor link <a href="#miao">Find the喵星人</a>；（Note: The attribute value of the href property must be prefixed with #）
Set an anchor point at the required position in the page <a name="miao"></a>；（Note: A name attribute must be written in the a tag, the attribute value should be the same as the [1] of the href attribute value, without #) Fill in the corresponding text as needed in the tag, generally no content is written。

(II) Page Internal Jump Setting Method2:

Set an anchor link <a href="#miao">Find the喵星人</a>；（Note: The attribute value of the href property must be prefixed with #）
Set the position of the anchor point <h4 id="miao">Miao Star Base</h4>; Add an id attribute to the tag where you want to jump, the attribute value should be the same as the href attribute value in ①, without #

　　 Note: Method two does not require adding a separate a tag to set the anchor point, just add an id to the tag where needed.

Example

<!DOCTYPE html><html><head>
　　　　<meta charset="UTF-8">
　　　　<title>Anchor Demonstration-Basic Tutorialoldtoolbag.com</title>
</head>
<body>
　　　　<ul>
　　　　　　　　<li><a href="#miao">Find the喵星人</a></li>
　　　　　　　　<li><a href="#wang">Find the汪星人</a></li>
　　　　　　　　<li><a href="#meng">Other cute creatures</a></li>
　　　　</ul>
　　　　<a name="miao"></a><!--Set Anchor Method1-->
　　　　<h3　id="miao">Miao Star Base</h3><!--Set Anchor Method2-->
　　　　<p>Meow meow~</p>
　　　　<p>Meow meow~</p>
　　　　<p>Meow meow~</p>
　　　　<p>Meow meow~</p>
　　　　<p>Meow meow~</p>
　　　　<p>Meow meow~</p>
　　　　
　　　　<a name="wang"></a>
　　　　<p>Woof woof~</p>
　　　　<p>Woof woof~</p>
　　　　<p>Woof woof~</p>
　　　　<p>Woof woof~</p>
　　　　<p>Woof woof~</p>
　　　　<p>Woof woof~</p>
　　　　<a name="meng"></a>
　　　　<p>Cute cute cute~</p>
　　　　<p>Cute cute cute~</p>
　　　　<p>Cute cute cute~</p>
　　　　<p>Cute cute cute~</p>
　　　　<p>Cute cute cute~</p>
　　　　<p>Cute cute cute~</p>
</body>
</html>

Test and See ‹/›

HTML Video (Video) Playback HTML Links