HTML 锚点三种实现方法

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

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

1. 在同一页面中

<a name="add"></a> 或者 <a id="add"></a> 
<a href="#add">跳转到add</a>

(ps:用id兼容性好些)

2. 在不同页面中

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

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

3. 点击链接触发js事件,同时跳转到锚点,

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

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

第二种:

<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) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » HTML 锚点三种实现方法

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活