html 锚点三种实现方法

在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在php中文网介绍html 锚点三种实现方法

1. 在同一页面中

<a name="add"></a><!-- 定义锚点 -->

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

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

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

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

第一种：

<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

第二种：

<p id="pNode"><!-- contents --></p><!-- 假设一个需要跳转到的节点 -->

<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>

在html中设置锚点定位有几种方法，使用id定位、使用name定位、使用js定位，这些方法不一定是最全的，只可以参考下

1、使用id定位：

这样的定位可以针对任何标签来定位。

2、使用name定位：

使用name属性只能针对a标签来定位，而对p等其他标签就不能起到定位作用。

3、使用js定位

实例：

js 锚点平滑定位

以上就是html 锚点三种实现方法的详细内容，更多请关注php中文网其它相关文章！