HTML 锚点三种实现方法

2023-01-16 13:40:26 浏览数 (1)

在网页中经常用到锚点,特别是在比较长的页面中锚点的使用会增加用户体验。

下面介绍下锚点三种实现方法:

1. 在同一页面中

代码语言:javascript复制
<a name="add"></a> 或者 <a id="add"></a> 
<a href="#add">跳转到add</a>

(ps:用id兼容性好些)

2. 在不同页面中

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

代码语言:javascript复制
<a href="a.html#add">跳转到a.add</a>
3. 点击链接触发js事件,同时跳转到锚点,

有两种处理方式: 第一种:

代码语言:javascript复制
<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

第二种:

代码语言:javascript复制
<p id="pNode"></p>
<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">scrollIntoView</a>

通过scrollIntoView实现锚点效果

scrollIntoView()的用法 scrollIntoView是一个与页面(容器)滚动相关的API,该API只有boolean类型的参数能得到良好的支持(firefox 36 都支持)

参数Boolean类型的情况 调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;

参数为false时,使element的底部与视图(容器)底部对齐。

提示:页面(容器)可滚动时才可有效.

0 人点赞