![HTML5+CSS3+JavaScript 从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/418/31794418/b_31794418.jpg)
上QQ阅读APP看书,第一时间看更新
7.4 定义锚点超链接
锚点(anchor)其实就是超链接的一种,是一种特殊的超链接。它可以分两种情况,一种是链接到本页面,另一种是链接到其他页面。本节将详细介绍。
7.4.1 建立锚点超链接
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P122_23922.jpg?sign=1739382612-GGMwnzfwKweW3Ex0143TYwj2HsOjQX5L-0-67e64e8a070f9501f6c75af5c07d6083)
建立锚超链接很简单,只需要给超链接目标添加id或者name属性,超链接的href属性设置成“#”加上id或者name属性的值就可以了,代码如下:
<a href="#a"></a> <div id="a"></div>
7.4.2 超链接同一页面中的锚点
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P123_24069.jpg?sign=1739382612-LengCx51jrg1tTRAIWRUXb5OqUlwOUE9-0-9c7637d28e0c11cdbadb29447927652b)
链接同一个页面中锚点,就是从页面中的某个位置链接到本页面中想要滚动到的地方,如看电子书时,通过点击目录,可以到达想要看的章节内容。
【例7-4】(实例文件:ch07\Chap7.4.html)超链接同一个页面中的锚点。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P123_119893.jpg?sign=1739382612-MuyX55eMGnlROVqiE9Kq8z3jlsIbQzZu-0-821870953586ea6e45f9bf9025fdd5bf)
相关的代码实例请参考Chap7.4.html文件,在IE浏览器中运行的结果如图7-6所示。当单击锚超链接时,页面将跳转到锚点的位置,如图7-7所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P123_24008.jpg?sign=1739382612-ZSGmDvdTDnDURYUdqFSh0s1sV9jIbfup-0-691fe105ceebceaec9e819d2602bc8b0)
图7-6 页面加载完效果
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P123_24015.jpg?sign=1739382612-9qUx0E2OMzYTN3bsBYJGldV5DTagVJnI-0-0febf86bfc66479fa9e8636f6eb55afb)
图7-7 锚点的位置
7.4.3 超链接到其他页面中的锚点
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P123_24070.jpg?sign=1739382612-hbLpEQXMhAlYKLlBlE3vQcVt7rdL8NEM-0-c9c624cbc5e6c137f6b602a86b41c6af)
链接到其他页面中的锚点其实很简单,只需要在锚点的前面加上该页面的名字即可。
【例7-5】(实例文件:ch07\Chap7.5.html)链接到其他页面中的锚点。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P123_119896.jpg?sign=1739382612-2QChKX0cl5ePcx1BvDRGXUc7T43E1fAH-0-231d5eb90c069ef041e3de9ea43379f5)
页面.html文件:
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P124_119895.jpg?sign=1739382612-8nTf379V7PyVtEHiyK31V3u8N5OKNvG4-0-1b0895d74c6ac87d877a38cd6f496d5d)
相关的代码实例请参考Chap7.5.html文件,在IE浏览器中运行的结果如图7-8所示。当单击“外部锚链接”时,页面将跳转到“页面.html”的锚点,效果如图7-9所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P124_24194.jpg?sign=1739382612-iV7h4WYWA0FziB26sAddwLKSLm2d9WEm-0-970b1927ee1af8818053ffc72a07e00f)
图7-8 页面加载完效果
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P124_24200.jpg?sign=1739382612-8ef44MAQXV5oHb3edhPYRndmmFQ8W7t3-0-5e91b7c11d04d310c91ec610393af427)
图7-9 其他页面的锚点位置