Rumah  >  Artikel  >  pembangunan bahagian belakang  >  html锚点有几种实现方法

html锚点有几种实现方法

PHPz
PHPzasal
2016-06-06 20:42:152241semak imbas

html锚点有3种实现方法,分别是:1、在同一页面中,代码为“457fb2a18f625ee3ad05c2b4d012d321跳转到add5db79b134e9f6b82c0b36e0489ee08ed”;2、在不同页面中,代码为“07264a81dc0bf1a319b6158c27dff876跳转到a.add5db79b134e9f6b82c0b36e0489ee08ed”;3、点击链接触发js事件。

html锚点有几种实现方法

html锚点有几种实现方法?

html 锚点三种实现方法

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

1). 在同一页面中

<a name="add"></a> 或者 <a id="add"></a> (ps:用id兼容性好些)
<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"></p>
<a href="#" onclick="document.getElemetnById(&#39;pNode&#39;).scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>

scrollIntoView()的用法

scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况

调用方法为 element.scrollIntoView() 参数默认为true。

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

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

TIPS:页面(容器)可滚动时才有用!

企业微信截图_15924449954716.png

更多相关技术文章,请访问PHP中文网

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:一个简单的mysql数据问题Artikel seterusnya:求郵件訂閱系統的思路