
上QQ阅读APP看书,第一时间看更新
7.4 定义锚点超链接
锚点(anchor)其实就是超链接的一种,是一种特殊的超链接。它可以分两种情况,一种是链接到本页面,另一种是链接到其他页面。本节将详细介绍。
7.4.1 建立锚点超链接

建立锚超链接很简单,只需要给超链接目标添加id或者name属性,超链接的href属性设置成“#”加上id或者name属性的值就可以了,代码如下:
<a href="#a"></a> <div id="a"></div>
7.4.2 超链接同一页面中的锚点

链接同一个页面中锚点,就是从页面中的某个位置链接到本页面中想要滚动到的地方,如看电子书时,通过点击目录,可以到达想要看的章节内容。
【例7-4】(实例文件:ch07\Chap7.4.html)超链接同一个页面中的锚点。

相关的代码实例请参考Chap7.4.html文件,在IE浏览器中运行的结果如图7-6所示。当单击锚超链接时,页面将跳转到锚点的位置,如图7-7所示。

图7-6 页面加载完效果

图7-7 锚点的位置
7.4.3 超链接到其他页面中的锚点

链接到其他页面中的锚点其实很简单,只需要在锚点的前面加上该页面的名字即可。
【例7-5】(实例文件:ch07\Chap7.5.html)链接到其他页面中的锚点。

页面.html文件:

相关的代码实例请参考Chap7.5.html文件,在IE浏览器中运行的结果如图7-8所示。当单击“外部锚链接”时,页面将跳转到“页面.html”的锚点,效果如图7-9所示。

图7-8 页面加载完效果

图7-9 其他页面的锚点位置