在网页中经常用到锚点,特别是在比较长的页面中锚点的使用会增加用户体验。
下面介绍下锚点三种实现方法:
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的底部与视图(容器)底部对齐。
提示:页面(容器)可滚动时才可有效.