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的底部与视图(容器)底部对齐。

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

 

前端技术

解决css引用字体跨域问题

2021-10-5 18:12:36

javascript前端技术

jQuery添加dom节点的方法

2022-4-30 10:08:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索