css中的锚点

一，在同一页面：

在页面适当位置定义如下的锚点：

<a name="top">这里是TOP部分</a>
<a name="content">这里是CONTENT部分</a>
<a name="foot">这里是FOOT部分</a>    //这里的name换成id同样有效

(你可以使用id属性来替代name属性，明明锚点同样有效)

注意：使用id来定义锚点，可以定位针对任何标签来定位。name属性只能针对a标签来定位。

 

对于如上锚点的访问有两种方法：

1,利用超链接<a></a>制作锚点链接，主要用于页面内的锚点访问

<a href="#top">点击我链接到TOP</a>
<a href="#content">点击我链接到CONTENT</a>
<a href="#foot">点击我链接到FOOT</a>

2，另一种方式，是直接在页面地址后面加锚点标记，主要用于不同页面之间的锚点访问

假如本页面的地址是http://文件路径/index.html，要访问foot锚点只要访问如下链接即可
http://文件路径/index.html#foot

 

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

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

 

三，点击链接触发js事件，同时跳转到锚点，有两种处理方式：

1,

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

2,

<p id="pNode"><!-- contents --></p><!-- 假设一个需要跳转到的节点 -->
<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a> 

 参考博客： html中的锚点介绍和使用

 html 页面内锚点定位及跳转方法总结

 

转载于:https://www.cnblogs.com/qianxunpu/p/8328262.html