很简单的知识点,一看就知道怎么用。
很早以前了,初学HTML的时候就看到的锚点这个功能,但是一直没有使用过,最近在给公司做官网的时候用到了锚点,顺手记录一下。
// a.html
<a href="#one">点击跳转到第一个锚点</a>
<a href="b.html#two">点击跳转到第二个锚点</a>
// a.html
<div id="one">第一个锚点</div>
// b.html
<a name="two">第二个锚点</a>
如同上面代码所示,要在网页上实现锚点效果,需要具有两个要素:
- 需要有一个锚点,这个锚点就是我们要跳转到的位置。一般情况下,我们会在目标节点上添加id属性或者name属性,这个id或者name属性的值就是我们寻找锚点的依据,推荐使用id属性来标记锚点(因为id能够在各种标签上使用,name属性标记锚点时只能用在a标签上)。
- 需要一个触发锚点跳转的a标签。a标签一般用作定义超链接,用作超链接时它的href属性的值是另一个页面的URL。a标签用作锚点时,href的值是锚点的id值或者name值。
- 同一页面内的锚点跳转时,给href赋值
# + 锚点id的值
或者# + 锚点name的值
,需要跳转其他页面的锚点位置时,需要在#
前面加上跳转的路径,例如:href="b.html#two"