HTML中的锚点

前言

提示：锚点通俗来说就是起到文章目录的作用，精准跳转到文章指定位置

用锚点实现回到顶部、回到底部、到文章中任意段落

一、锚点是什么？

在我们学习HTML的过程中，要理解写页面的作用，最初写页面的本质是为了文章服务的，一篇文章如果太长，我们想回到顶部、或者回到某一个段落就会费劲儿，所以锚点就是为了精准定位段落，起到目录的效果。

二、简单使用

1.在同一页面中

<!-- 定义锚点 --> 
<p id="add">目标位置<p>

<!-- 使用锚点 --> 
<a href="#add">跳转到add</a>

2.在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点

<a href="a.html#add">跳转到a.add</a>

3.点击链接触发js事件，同时跳转到锚点，有两种处理方式：

#第一种：
<a href="#add" οnclick="add()">触发add函数并跳转到add锚点</a>

#第二种：
<p id="pNode"><!-- contents --></p> <!-- 假设一个需要跳转到的节点 -->
<a href="#" οnclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>